一、路由的query傳參
- 路由的query參數(shù)
- 傳遞參數(shù)
<!--跳轉(zhuǎn)路由并攜帶query參數(shù)， to的字符串寫法-->
<!-- <router-link :to='`/home/message/detail?id=${m.id}&title=${m.title}`'>{{ m.title }}</router-link> -->
<!--跳轉(zhuǎn)路由并攜帶query參數(shù)， to的對象寫法-->
<router-link :to="{
path: '/home/message/detail',
query:{
id:m.id,
title:m.title
}
}">
{{ m.title }}
</router-link>
- 接收參數(shù)
$route.query.id
$route.query.title
二、命名路由
- 作用:可以簡化路由的跳轉(zhuǎn)
- 使用方法
- 給路由命名：
{
path:'/demo',
component:Demo,
children:[
{
path:'test',
component:Test,
children:[
{
name:'hello' //給路由命名
path:'welcome',
component:Hello,
}
]
}
]
}
- 簡化跳轉(zhuǎn)
<!--簡化前，需要寫完整的路徑-->
<router-link to="/demo/test/welcome">跳轉(zhuǎn)</router-link>
<!--簡化后，直接通過名字跳轉(zhuǎn)-->
<router-link ：to="{name:hello}">跳轉(zhuǎn)</router-link>
<!--簡化寫法配合傳遞參數(shù)-->
<router-link
:to="{
name:'hello',
query:{
id:001,
title:'你好！'
}
}"
三、路由的params傳參
- 配置路由，聲明接收params參數(shù)
{
path: '/home',
component: Home,
children: [ //通過children配置子路由
{
path: 'news', //此處一定不要寫成：/news
component: News,
},
{
path: 'message', //此處一定不要寫成：/message
component: Message,
children: [
{
name:'xiangqing',
path: 'detail/:id/:title', //使用占位符聲明接收params參數(shù)
component: Detail,
}
]
}
],
},
- 傳遞參數(shù)
<!--跳轉(zhuǎn)路由并攜帶params參數(shù)， to的字符串寫法-->
<router-link :to='`/home/message/detail/${m.id}/${m.title}`'>{{ m.title }}</router-link>
<!--跳轉(zhuǎn)路由并攜帶params參數(shù)， to的對象寫法-->
<router-link :to="{
name: 'xiangqing',
params:{
id:m.id,
title:m.title
}
}"
>
{{ m.title }}
</router-link>
特別注意：路由攜帶params參數(shù)時，若使用to對象寫法，則不能使用path配置項，必須使用name配置！
- 接收參數(shù)
$route.params.id
$route.params.title
四、配置路由的props配置
作用：讓路由組件更方便的收到參數(shù)
{
name:'xiangqing',
path: 'detail/:id/:title',
component: Detail,
//props的第一種寫法，值為對象，該對象中的所有key-value都會以props的形式傳給Detail組件。
// props:{a:1, b:'hello'}
//props的第二種寫法，值為布爾值，若布爾值為真，就會該路由組件收到的所有params參數(shù)，以props的形式傳給Detail組件。
// props:true,
//props的第三種寫法，值為函數(shù)，該函數(shù)返回的對象中每一組key-value都會通過props傳給Detail組件。
props($route){
return {
id:$route.query.id,
//id:$route.params.id,
title:$route.query.title
//title:$route.params.title
}
},
}
五、<router-link>的replace屬性
- 作用：控制路由跳轉(zhuǎn)時操作瀏覽器歷史記錄的模式
- 瀏覽器的歷史記錄有兩種寫入方式：分別為
push和replace,push要追加歷史記錄，replace是替換當前記錄，路由跳轉(zhuǎn)時候默認為push - 如何開啟
replace模式：<router-link replace ......>News</router-link>
六、編程式路由導航
- 作用：不借助實現(xiàn)路由跳轉(zhuǎn)，讓路由跳轉(zhuǎn)更加靈活
- 具體編碼：
this.$router.push({
name: 'xiangqing',
query:{
id:m.id,
title:m.title
}
})
this.$router.push({
name: 'xiangqing',
query:{
id:m.id,
title:m.title
}
})
this.$router.forward()//前進
this.$router.back()//后退
this.$router.go(-3)//可前進或后退，負數(shù)-》倒退；正數(shù)-》前進
七、緩存路由組件
- 作用：讓不展示的路由組件保持掛載，不被銷毀。
- 具體編碼：
//緩存多個路由組件
//<keep-alive ：include=["News","Message"]>
//緩存一個路由組件
<keep-alive include="News"> //此次News為組件名，
<router-view></router-view>
</keep-alive>
注： 不加include則所有的路由組件都會被緩存文章來源：http://www.zghlxwxcb.cn/news/detail-821521.html
八、兩個新的生命周期鉤子
1.作用：路由組件所獨有的兩個鉤子，用于捕獲路由組件的激活狀態(tài)。
2.具體名字：文章來源地址http://www.zghlxwxcb.cn/news/detail-821521.html
-
activated路由組件被激活時觸發(fā) -
deactivated路由組件失活時觸發(fā)
九、路由守衛(wèi)
- 作用：對路由進行權(quán)限控制
- 分類：全局守衛(wèi)、獨享守衛(wèi)、組件內(nèi)守衛(wèi)
- 全局守衛(wèi)：
/全局前置路由守衛(wèi)--初始化及每次路由切換之前被調(diào)用
router.beforeEach((to, from, next) => {
// to and from are both route objects. must call `next`.
console.log('前置路由守衛(wèi)',to,from,next)
if (to.meta.isAuth) {//判斷是否需要鑒權(quán)
if(localStorage.getItem('school')==='atguigu'){
next() //放行
}else{
alert('學校名不對，無權(quán)限查看！')
}
}else{
next()//放行
}
})
//全局后置路由守衛(wèi)--初始化及每次路由切換之后被調(diào)用
router.afterEach((to, from, next) => {
// to and from are both route objects. must call `next`.
console.log('后置路由守衛(wèi)',to,from,next);
if (to.meta.title){
document.title = to.meta.title //修改網(wǎng)頁的title
}else{
document.title = 'vue_test'
}
})
- 獨享路由守衛(wèi)
beforeEnter: (to, from, next) => {
console.log('前置路由守衛(wèi)',to,from,next)
if (to.meta.isAuth) {//判斷是否需要鑒權(quán)
if(localStorage.getItem('school')==='atguigu'){
next() //放行
}else{
alert('學校名不對，無權(quán)限查看！')
}
}else{
next()//放行
}
}
- 組件內(nèi)守衛(wèi)
//通過路由規(guī)則，進入該組件時被調(diào)用
beforeRouteEnter(to, from, next) {
},
//通過路由規(guī)則，離開該組件時被調(diào)用
beforeRouteLeave(to, from, next) {
}
十、路由器的兩種工作模式
- 對于一個url來說，什么是hash值?#及其后面的內(nèi)容就是hash值
- hash值不會包含在 HTTP 請求中，即: hash值不會帶給服務(wù)器。
- hash模式:
- 地址中永遠帶著#號，不美觀。
- 若以后將地址通過第三方手機app分享，若app校驗嚴格，則地址會被標記為不合法
- 兼容性較好
- history模式
- 地址干凈，美觀。
- 兼容性和hash模式相比略差
- 應(yīng)用部署上線時需要后端人員支持，解決刷新頁面服務(wù)端404的問題
到了這里，關(guān)于Vue學習筆記11--路由2（路由傳參/命名路由）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
