-
hash和history模式的設(shè)定
mode:'history',
routes: [
{
path: '/',
name: 'home',
component: home
}
]
})
-
router-link
其實(shí)就是導(dǎo)航，根據(jù)to屬性去匹配對(duì)應(yīng)的組件淹辞，然后渲染到正確位置飘庄。
如果用a標(biāo)簽，頁(yè)面會(huì)發(fā)生跳轉(zhuǎn)酌泰。默認(rèn)router-link會(huì)渲染成a標(biāo)簽媒佣；
- tag="要生成的標(biāo)簽名"，頁(yè)面會(huì)生成指定的標(biāo)簽宫莱；并且不需要自己監(jiān)聽(tīng)事件丈攒，vue-router都自動(dòng)監(jiān)聽(tīng);
<router-link :to="{path:'/home'}" tag="li">
<i></i><span>home</span>
</router-link>
- to:要跳轉(zhuǎn)到的目標(biāo)文件哩罪；可以用':to'授霸，去動(dòng)態(tài)綁定;
<router-link :to="index">home</router-link>
<!--對(duì)象形式-->
<router-link :to="{path:'/home'}">home</router-link>
export default {
data(){
return {
index : '/home'
}
}
}
- tag:設(shè)置生成指定的標(biāo)簽
<router-link :to="{path:'/home'}" tag="div">home</router-link>
- linkActiveClass : 設(shè)置導(dǎo)航激活的class
new Router({
mode:'history',
linkActiveClass:'isActive',
]
})
- active-class : 設(shè)置單獨(dú)的、獨(dú)有的自己的激活狀態(tài)顏色（比如每個(gè)導(dǎo)航激活顏色不同）
<router-link to="/document" tag="li" active-class="activeClass">document</router-link>
- event : 指定事件
<router-link :to="{path:'/home'}" event="mouseover" tag="li">home</router-link>
- name : 為組件命名
如果路徑很多际插，在每個(gè)router上都寫路徑碘耳，而且如果路徑嵌套復(fù)雜，就會(huì)一不小心就出錯(cuò)框弛，而且很麻煩辛辨，這個(gè)時(shí)候就可以給每個(gè)組件添加name屬性
<router-link :to="{name:'study'}" >
-
重定向
比如用戶輸入了一個(gè)錯(cuò)誤的路徑，常見(jiàn)的就是給出一個(gè)404或者跳轉(zhuǎn)到首頁(yè)。
{
path: '*',
//直接渲染一個(gè)組件 component: noFound
//重定向 : 直接定到指定的組件 redirect : '/home'
//redirect : {path:'/home'}
//利用組件上的name redirect:{name : 'document'}
redirect:(to)=>{
//to:目標(biāo)路由對(duì)象斗搞，就是訪問(wèn)的路徑的路由信息
if(to.path === '/123'){
return '/home'
}else if(to.path === '/456'){
return {path:'/document'}
}
}
}
-
別名 ： alias
比如指攒，你在地址欄輸入了/index,希望這個(gè)地址渲染的是home，這個(gè)時(shí)候就可以在組件的配置上寫別名
routes: [
{
path: '/home',
name: 'home',
component: home,
alias : '/index'
}
]
-
exact：其他路徑被點(diǎn)亮的時(shí)候去掉根路徑的active
<router-link exact to="/" >
routes: [
{
path: '/',
component: home,
}
]
-
嵌套路由的使用(在父路由中切換)
圖示：
注意僻焚，如果路由中允悦，有了子路由，就不要把name給父路由設(shè)置虑啤，直接設(shè)置子路由即可隙弛，否則瀏覽器會(huì)警告提示。
{
path: '/about',
//如果有默認(rèn)子路由狞山，父級(jí)就不要設(shè)置name了 name: 'about',
component: about,
children:[
{
//默認(rèn)子路由
path : '',
name : study,
component : study
},
{
path : 'hobby',
name : hobby,
component : hobby
},
{
path : 'work',
name : work,
component : work
}
]
}
- 路徑設(shè)置：現(xiàn)在about下面有三個(gè)組件全闷，如果現(xiàn)在想實(shí)現(xiàn)：進(jìn)入一個(gè)子理由的時(shí)候，地址欄不顯示其父路由（about/work==>/work）,這時(shí)只需要在子路由path中加一個(gè)/（/的意思是相對(duì)根路由）
{
path : '/hobby',
name : 'hobby',
component : hobby
}
-
命名視圖
概念：就是對(duì)router-view標(biāo)簽起一個(gè)名字萍启；
使用場(chǎng)景：當(dāng)遇到同一個(gè)單頁(yè)面組件里总珠，需要出現(xiàn)兩個(gè)或多個(gè)router-view時(shí)，就需要對(duì)標(biāo)簽命名了勘纯；
命名方法：
通過(guò)name屬性起名
<router-view name="slider"></router-view>
new VueRouter({
routes:[
{
path:'/document',
components:{
default:document姚淆， //default為默認(rèn)組件
slider:slides
//slider:寫的是標(biāo)簽中的name值；
//slides：寫的是slides這個(gè)名字的.vue文件屡律，需要引入到頁(yè)面中
}
}
]
});
注意：是在對(duì)應(yīng)的路由中添加腌逢；
-
滾動(dòng)行為：
瀏覽器滾動(dòng)默認(rèn)行為說(shuō)明：當(dāng)頁(yè)面滾動(dòng)到一定位置后，手動(dòng)刷新瀏覽器超埋，會(huì)發(fā)現(xiàn)頁(yè)面依然在之前滾動(dòng)位置搏讶，這是瀏覽器記錄滾動(dòng)位置的默認(rèn)行為；
需求：點(diǎn)擊瀏覽器的前進(jìn)和后退的按照時(shí)霍殴，讓打開(kāi)的頁(yè)面媒惕，保持在之前頁(yè)面滾動(dòng)的位置；
步驟：
new VueRouter({
scrollBehavior(to,from,savedPosition){//滾動(dòng)行為来庭，在點(diǎn)擊瀏覽器的前進(jìn)后退或切換導(dǎo)航時(shí)妒蔚，觸發(fā)
//to:要進(jìn)入的目標(biāo)路由對(duì)象 (要去哪里)
//from:離開(kāi)的路由對(duì)象 (從哪里來(lái))
//savadPosition：記錄當(dāng)前滾動(dòng)位置滾動(dòng)條的坐標(biāo)，點(diǎn)擊前進(jìn)后退時(shí)月弛，坐標(biāo)值 {x:0,y:0}
if(savePosition){
return savePosition; //這樣就可以定位到之前的位置啦
}else{
return {x:0,y:0}
}
}
});
-
動(dòng)態(tài)路徑：
不同的路徑（路由）肴盏，映射同一個(gè)組件。比如進(jìn)了一個(gè)網(wǎng)站帽衙，到了個(gè)人信息頁(yè)面中菜皂，每個(gè)人信息頁(yè)面其實(shí)一樣的，只是不同等級(jí)的用戶展示的數(shù)據(jù)不同厉萝，這個(gè)時(shí)候就可以用到動(dòng)態(tài)路徑恍飘。匹配到的所有路由榨崩，全都映射到同一個(gè)組件。
場(chǎng)景： 根據(jù)不同用戶展示不同的信息章母。
實(shí)現(xiàn)思路 ： 這個(gè)時(shí)候其實(shí)用的是同一個(gè)組件罪帖，只是展示的數(shù)據(jù)不同嗡官。首先需要在導(dǎo)航標(biāo)簽（router-link）的to屬性上設(shè)置成動(dòng)態(tài)的官还，也就是不同的用戶數(shù)據(jù)拼接而成羽嫡，然后在組件上配置同樣的參數(shù)，這個(gè)時(shí)候就可以用路由信息對(duì)象獲取到用戶的id舞肆，如果獲取的id和數(shù)據(jù)里的某一項(xiàng)id相同焦辅，就把這條數(shù)據(jù)放入自己在data數(shù)據(jù)中新建的json上，數(shù)據(jù)綁定的是這個(gè)json
image.png
- 動(dòng)態(tài)路徑參數(shù),以冒號(hào)開(kāi)頭
路徑：/user/:userId ==>：userId為動(dòng)態(tài)路徑參數(shù)
userId可以使用正則符表示
如：
匹配 /user/:userId 有userId和沒(méi)有userId的都需要匹配上椿胯，可以寫成：
path:/user/:userId?
說(shuō)明 ： 這里的userId筷登？表示有userId和無(wú)userId都能匹配
注意：在路由path中，添加動(dòng)態(tài)參數(shù)方法是 (:參數(shù)名)哩盲，這里可以加多個(gè)前方；
如：user/:userId/:tip
{
/*
這個(gè)userId是自己隨意定義的，:userId意思就是動(dòng)態(tài)的廉油，當(dāng)訪問(wèn)user后面嵌套一個(gè)路徑的時(shí)候惠险，
這個(gè)userId就等于標(biāo)簽里寫好的名字
:to="'/user/'+item.id"
*/
// 這里的userId？表示有userId和無(wú)userId都能匹配,/user和/user/1 都可以匹配
/*
********思路**********：
1抒线、通過(guò)路徑班巩，就可以拿到userId，拿到userId嘶炭，就可以找到對(duì)應(yīng)的用戶信息抱慌；
2、怎么拿到userId 眨猎？ 只需要拿到路由信息抑进，就可以拿到這個(gè)值了。
3睡陪、怎么拿到路由信息寺渗？看下一個(gè)API ：對(duì)組件注入.
*/
path: '/user/:userId?', //user/1 user/2
component: user,
},
-
如何拿到動(dòng)態(tài)路由的信息：對(duì)組件的注入&獲取參數(shù)：路由信息對(duì)象的params
一個(gè) route object（路由信息對(duì)象） 表示當(dāng)前激活的路由的狀態(tài)信息，包含了當(dāng)前 URL 解析得到的信息兰迫，還有 URL 匹配到的 route records（路由記錄）信殊。
通過(guò)在VUE根實(shí)例的router配置傳入router實(shí)例
- $router router實(shí)例對(duì)象
- $router 當(dāng)前激活的路由信息對(duì)象，每個(gè)組件實(shí)例都會(huì)有逮矛；
- beforeRouterEnter() 進(jìn)入組件前鉤子函數(shù)
- beforeRouterLeave() 離開(kāi)組件前鉤子函數(shù)
貼$route源碼如下 ：
export default {
watch : {
$route(){
let id = this.$route.params.userId;
for(var i = 0;i<this.userList.length;i++){
if(id==this.userList[i].id){
this.userInfo=this.userList[i]
}
}
}
},
created(){
//復(fù)用這個(gè)組件鸡号，這個(gè)函數(shù)不會(huì)再次被調(diào)用了,所以需要用watch監(jiān)控
//地址一但發(fā)生變化 转砖，$route會(huì)重新生成一個(gè)路由信息對(duì)象
//:this.$route.params.userId這樣就得到了動(dòng)態(tài)參數(shù)userId ： path: '/user/:userId?',
let id = this.$route.params.userId;
for(var i = 0;i<this.userList.length;i++){
if(id==this.userList[i].id){
this.userInfo = this.userList[i]
}
}
}
}
-
查詢字符串：
帶查詢參數(shù)的鏈接地址须鼎，稱為：查詢字符串鲸伴。
//下面的結(jié)果為 /user?info=share
<router-link :to="{ path: '', query: { info: 'share' }}">分享</router-link>
鏈接地址為：/user?info=share
在切換router-link時(shí)，如何獲取查詢字符串中晋控，info=share的share字符串汞窗？
通過(guò)路由信息對(duì)象中的query對(duì)象，用于URL查詢參數(shù)的對(duì)象赡译；
-
過(guò)渡動(dòng)效：
router 提供了transition的封裝組件仲吏，添加過(guò)渡動(dòng)畫(huà)
控制方法：會(huì)用CSS類名控制
image.png
- 使用方法：
將需要添加過(guò)渡效果的router-view包在transition標(biāo)簽中；如下 ：
<transition>
<router-view></router-view>
</transition>
- 過(guò)渡模式：
in-out: ： 新進(jìn)行過(guò)渡蝌焚，完成之后當(dāng)前元素過(guò)渡離開(kāi)
out-in：當(dāng)前元素先進(jìn)行過(guò)渡裹唆，完成之后新元素過(guò)渡進(jìn)入
使用方法如下：
<transition mode="輸入模式名">
<router-view></router-view>
</transition>
- 案例 ：
<transition mode="out-in">
<router-view class="center"/></router-view>
</transition>
.v-enter{
opacity:0
}
.v-enter-to{
opacity:1
}
.v-enter-active{
transition:1s
}
.v-leave{
opacity:0
}
.v-leave-to{
opacity:1
}
.v-leave-active{
transition:0
}
//以下的切換形式需要在transition上設(shè)置name屬性，值為left
.left-enter{
transform:translateX(100%)
}
.left-enter-to{
transform:translateX(0)
}
.left-enter-active{
transition:1s
}
.left-leave{
transform:translateX(0)
}
.left-leave-to{
transform:translateX(-100%)
}
.left-leave-active{
transition:1s
}
-
編程式的導(dǎo)航：
除了使用 <router-link> 創(chuàng)建 a 標(biāo)簽來(lái)定義導(dǎo)航鏈接只洒，我們還可以借助 router 的實(shí)例方法许帐，通過(guò)編寫代碼來(lái)實(shí)現(xiàn)。
- back：回退一步
- forward : 前進(jìn)一步
<input type="button" value="后退" @click="backHandel">
<input type="button" value="前進(jìn)" @click="forwardHandel">
methods:{
backHandel(){
this.$router.back()
},
forwardHandel(){
this.$router.forward()
}
}
- go : 指定前進(jìn)回退步數(shù)
goHandel(){ //控制的是前進(jìn)后退事件的步數(shù)
this.$router.go(-1) //正數(shù)前進(jìn)毕谴，負(fù)數(shù)后退
}
- push : 導(dǎo)航到不同url成畦，向history棧添加一個(gè)新的記錄
- replace : 導(dǎo)航到不同url,替換history棧中當(dāng)前記錄
<input type="button" value="控制指定的導(dǎo)航push" @click="pushHandel">
<input type="button" value="控制指定的導(dǎo)航replace" @click="replaceHandel">
pushHandel(){ //跳轉(zhuǎn)到指定的路徑
this.$router.push('/document') //正數(shù)前進(jìn)，負(fù)數(shù)后退
},
replaceHandel(){
this.$router.replace('/document')
}
-
路由元信息：
在路由配置中meta可以配置一些數(shù)據(jù)涝开，用在路由信息對(duì)象中循帐。
- 訪問(wèn)meta中的數(shù)據(jù)：$route.meta
- 路由meta的設(shè)置方法：(在路由對(duì)象中配置)
routes:[
{
path:'/',
meta:{
index:0;//路由的下標(biāo)
}
}
]
如果路由中有子路由，就配置到默認(rèn)的子路由中舀武，不用配置到父路由中拄养；
頁(yè)面中獲取方法：
$route.meta.index
- 通過(guò)監(jiān)聽(tīng)$route，得到目標(biāo)和離開(kāi)導(dǎo)航的下標(biāo)
watch:{
$route(to,from){
to.meta.index //目標(biāo)導(dǎo)航下標(biāo)
from.meta.index //離開(kāi)導(dǎo)航下標(biāo)
}
}
-
導(dǎo)航鉤子函數(shù)（全局級(jí)）
導(dǎo)航發(fā)生變化時(shí)银舱，導(dǎo)航狗子主要用來(lái)攔截導(dǎo)航衷旅，讓它完成跳轉(zhuǎn)或取消。(例如：如果用戶沒(méi)有登錄纵朋，就跳轉(zhuǎn)到登錄組件)
- 執(zhí)行鉤子函數(shù)位置（書(shū)寫位置）
router全局
單個(gè)路由
組件中 - 鉤子函數(shù)
router實(shí)例上：beforeEach柿顶，afterEach
單個(gè)路由中：beforeEnter
組件內(nèi)的鉤子：beforeRouterEnter,beforeRouteUpdata,beforeRouteLeave
- 鉤子函數(shù)接收的參數(shù)
to:要進(jìn)入的目標(biāo)路由對(duì)象，到哪里去
from:正要離開(kāi)導(dǎo)航的里有對(duì)象操软，從哪里來(lái)
next:用來(lái)決定跳轉(zhuǎn)或取消導(dǎo)航
{
path: '/document',
name: 'document',
meta:{
index:1,
login:true,
title : 'document'
}
}
router.beforeEach((to,from,next)=>{ //目標(biāo)路徑嘁锯，源路徑，進(jìn)入導(dǎo)航
next() //必寫聂薪，否則組件不會(huì)被渲染家乘，參數(shù)寫false,組件不會(huì)被渲染
if(to.meta.login){ //如果meta的login是true,那么表示沒(méi)有登錄，跳轉(zhuǎn)到login
next('/login')
}else{
next() //否則就是登錄了藏澳，渲染組件即可
}
})
router.afterEach((to,from,next)=>{
if(to.meta.title){//如果title存在仁锯，就改成組件自己的meta內(nèi)的title
window.document.title = to.meta.title
}else{
window.document.title = 'miaoei'
}
})
