Vue?router?路由守衛(wèi)詳解
一、全局前置beforeEach
當(dāng) Local Storage 里面存儲的 name 是 zhangsan 的時候, 點擊消息才顯示消息內(nèi)容
1. 全局前置beforeEach
給router添加一個路由守衛(wèi) beforeEach
語法 :
router.beforeEach((to, from, next)=>{})
作用 : 初始化的時候 和 在每一次路由切換之前調(diào)用beforeEach里面的函數(shù)
參數(shù) :
1.to : 目標(biāo)路由
2.from : 跳轉(zhuǎn)前的路由
3.next : 放行
2. 實現(xiàn)
二、需求二
如果有很多個路徑都需要做出判斷以后才跳轉(zhuǎn), 就需要寫很多判斷的代碼, 判斷結(jié)構(gòu)就會很復(fù)雜
這時需要判斷的路由里面就可以放一個meta標(biāo)簽
meta標(biāo)簽提供關(guān)于HTML文檔的元數(shù)據(jù) (元數(shù)據(jù)指用來描述數(shù)據(jù)的數(shù)據(jù))
這時就可以使用meta里面的標(biāo)記字段進(jìn)行判斷
三、全局后置守衛(wèi) afterEach
afterEach 和 beforeEach 使用方法基本一致.
區(qū)別就是afterEach沒有next這個參數(shù)
1. 修改title為自己的title
給每個路由指定自己的title名稱
const router = new VueRouter({
routes: [
{
name: 'home',
path: '/home',
component: Home,
meta: {
title: "首頁"
},
children: [
{
name: "xiaoxi",
path: 'message',
component: Message,
meta: {
title: "消息"
},
children: [
{
name: 'xiangqing',
path: 'detail',
component: Detail,
meta: {
isAuth: true,
title: "消息詳情"
}
}
]
}
]
},
{
path: '/about',
component: About,
meta: {
title: "關(guān)于"
}
}
]
})
在 beforEach里面修改title名
router.afterEach((to, from) => {
document.title = to.meta.title || "測試"
})
四、組件內(nèi)守衛(wèi)
1. beforeRouteEnter
通過路由規(guī)則, 進(jìn)入該組件時被調(diào)用
2. beforeRouteLeave
通過路由規(guī)則, 離開該組件時被調(diào)用
總結(jié)
本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
element-ui組件table實現(xiàn)自定義篩選功能的示例代碼
這篇文章主要介紹了element-ui組件table實現(xiàn)自定義篩選功能的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
這篇文章主要給大家分享的是vue?watch監(jiān)聽方法總結(jié)，偵聽器一般來說是用來監(jiān)聽數(shù)據(jù)的變化，默認(rèn)是在數(shù)據(jù)發(fā)生變化時執(zhí)行。監(jiān)聽的數(shù)據(jù)名放到這里面作為函數(shù)名，這個函數(shù)里面有兩個參數(shù)，一個是新值，一個是舊值。下面我們就一起進(jìn)入文章了解更具體的內(nèi)容吧2021-12-12
我們經(jīng)常在項目中會有支持pc與手機(jī)端需求,下面這篇文章主要給大家介紹了關(guān)于vue項目同時兼容pc和移動端的解決方式,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10
element中Select選擇器實現(xiàn)自定義顯示內(nèi)容
在我們很多前端業(yè)務(wù)開發(fā)中,往往為了方便,都需要自定義一些用戶組件,本文主要介紹了element中Select選擇器實現(xiàn)自定義顯示內(nèi)容,感興趣的可以了解一下2023-12-12
這篇文章主要介紹了vue實現(xiàn)的下拉框功能,涉及vue.js數(shù)據(jù)讀取、遍歷、事件響應(yīng)等相關(guān)操作技巧,需要的朋友可以參考下2019-01-01
這篇文章主要介紹了vue彈窗父子組件調(diào)用問題，本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-08-08
監(jiān)聽element-ui table滾動事件的方法
這篇文章主要介紹了監(jiān)聽element-ui table滾動事件的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
這篇文章主要為大家介紹了讓ChatGPT解讀Vue3源碼過程解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
這篇文章介紹了Vue.js通過組件處理Icon圖標(biāo)的方法，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-11-11
vue.js 實現(xiàn)v-model與{{}}指令方法
這篇文章主要介紹了vue.js 實現(xiàn)v-model與{{}}指令方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10