Vue?router?路由守衛(wèi)詳解
一、全局前置beforeEach
當(dāng) Local Storage 里面存儲(chǔ)的 name 是 zhangsan 的時(shí)候, 點(diǎn)擊消息才顯示消息內(nèi)容
1. 全局前置beforeEach
給router添加一個(gè)路由守衛(wèi) beforeEach
語法 :
router.beforeEach((to, from, next)=>{})
作用 : 初始化的時(shí)候 和 在每一次路由切換之前調(diào)用beforeEach里面的函數(shù)
參數(shù) :
1.to : 目標(biāo)路由
2.from : 跳轉(zhuǎn)前的路由
3.next : 放行
2. 實(shí)現(xiàn)
二、需求二
如果有很多個(gè)路徑都需要做出判斷以后才跳轉(zhuǎn), 就需要寫很多判斷的代碼, 判斷結(jié)構(gòu)就會(huì)很復(fù)雜
這時(shí)需要判斷的路由里面就可以放一個(gè)meta標(biāo)簽
meta標(biāo)簽提供關(guān)于HTML文檔的元數(shù)據(jù) (元數(shù)據(jù)指用來描述數(shù)據(jù)的數(shù)據(jù))
這時(shí)就可以使用meta里面的標(biāo)記字段進(jìn)行判斷
三、全局后置守衛(wèi) afterEach
afterEach 和 beforeEach 使用方法基本一致.
區(qū)別就是afterEach沒有next這個(gè)參數(shù)
1. 修改title為自己的title
給每個(gè)路由指定自己的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 || "測(cè)試" })
四、組件內(nèi)守衛(wèi)
1. beforeRouteEnter
通過路由規(guī)則, 進(jìn)入該組件時(shí)被調(diào)用
2. beforeRouteLeave
通過路由規(guī)則, 離開該組件時(shí)被調(diào)用
總結(jié)
本篇文章就到這里了,希望能夠給你帶來幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
element-ui組件table實(shí)現(xiàn)自定義篩選功能的示例代碼
這篇文章主要介紹了element-ui組件table實(shí)現(xiàn)自定義篩選功能的示例代碼,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-03-03vue項(xiàng)目同時(shí)兼容pc和移動(dòng)端的解決方式
我們經(jīng)常在項(xiàng)目中會(huì)有支持pc與手機(jī)端需求,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目同時(shí)兼容pc和移動(dòng)端的解決方式,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10element中Select選擇器實(shí)現(xiàn)自定義顯示內(nèi)容
在我們很多前端業(yè)務(wù)開發(fā)中,往往為了方便,都需要自定義一些用戶組件,本文主要介紹了element中Select選擇器實(shí)現(xiàn)自定義顯示內(nèi)容,感興趣的可以了解一下2023-12-12監(jiān)聽element-ui table滾動(dòng)事件的方法
這篇文章主要介紹了監(jiān)聽element-ui table滾動(dòng)事件的方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03vue.js 實(shí)現(xiàn)v-model與{{}}指令方法
這篇文章主要介紹了vue.js 實(shí)現(xiàn)v-model與{{}}指令方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-10-10