Vue路由守衛(wèi)（全局路由守衛(wèi)、路由獨享守衛(wèi)、組件內部守衛(wèi)）

一、全局守衛(wèi)（兩種，在main.js文件下設置）
第一種：router.beforeEach((to,from,next)=>{})

router.beforeEach((to,from,next)=>{

  if(to.path == '/login' || to.path == '/register'){

    next();

  }else{

    alert('您還沒有登錄，請先登錄');

    next('/login');

  }

})

回調函數中的參數

*to：進入到那個路由去

*from:從那個路由來的（上一個路由）

*next：順延，next()---（放行）---next('/login')---（不放行，讓他跳轉到login頁面）--函數，決定是否展示你要看到的路由頁面

第二種：router.afterEach((to,from)=>{})

只有兩個參數，to：進入到哪個路由去，from：從哪個路由離。

如下，每次切換路由時，都會彈出alert，點擊確定后，展示當前頁面。

router.afterEach((to,from)=>{

  alert("after each");

})

二、路由獨享守衛(wèi)

在router文件夾下index.js文件 和path同級。

beforeEnter((to,from,next)=>{//里邊的用法和全局一樣})

三、組件內部守衛(wèi)

在組件.vue內部寫和 data(){}同級

//1.組件進入之前的守衛(wèi)
beforeRouteEnter(to,from,next){//和全局使用一樣}    //生命周期還沒開始，所以這個函數沒有this

//2.組件更新守衛(wèi)
beforeRouteUpdate(to,from,next){//和全局使用一樣}  //  "/:id"動態(tài)路由發(fā)生變化，頁面沒有重新加載，觸發(fā)更新守衛(wèi)

//3.組件離開守衛(wèi)
beforeRouteLeave(to,from,next){//和全局使用一樣}    //在離開當前路由的時候觸發(fā)，有this
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

友情鏈接更多精彩內容