概述

在我們使用vue-router的時候，路由守衛(wèi)就像監(jiān)聽器、攔截器一樣，幫我們做一些鑒權等操作，vue中的路由守衛(wèi)分為全局路由守衛(wèi)、獨享路由守衛(wèi)、組件內的路由守衛(wèi)

全局路由守衛(wèi)：?beforeEach、 afterEach

組件獨享路由守衛(wèi) ：beforeEnter、 beforeLeave

組件內路由守衛(wèi)：beforeRouteEnter、 beforeRouteUpdate、 beforeRouteLeave

以上的路由鉤子足夠見名知義，全局的為路由前置守衛(wèi)和路由后置守衛(wèi)，組件獨享路由守衛(wèi)進入時守衛(wèi)和離開時守衛(wèi)，組件內路由守衛(wèi)是前置守衛(wèi)、路由更新時守衛(wèi)，和離開時的后置守衛(wèi)，下面將一一介紹路由守衛(wèi)

寫路由守衛(wèi)的位置：

全局路由守衛(wèi)寫在：main.js中或者router文件夾下的index.js中

組件獨享路由守衛(wèi)寫在：router下的index.js中

組件內路由守衛(wèi)寫在：具體的組件之中.vue文件之中

全局路由守衛(wèi)

前置路由守衛(wèi)

首先需要在用到路由守衛(wèi)的地方明確聲明{isAuth：true}

    {
        path: '/',
        name: 'HomePage',
        component: () => import('../views/HomePage.vue'),
        meta: { isAuth: true, title:'主頁' },
    },

?添加前置路由守衛(wèi)

//全局前置路由守衛(wèi)————初始化的時候被調用、每次路由切換之前被調用
router.beforeEach((to, from, next) => {
    //如果路由需要跳轉
    if (to.meta.isAuth) {
        //判斷 如果localStorage本地存儲是xxx的時候，可以進去
        if (localStorage.getItem('xxx') === 'xxx') {
            next()  //放行
        } else {
            // 或者定位到某個具體頁面
            alert('抱歉，您無權限查看！')
        }
    } else {
        // 否則，放行
        next()
    }
})

后置路由守衛(wèi)

前提是也需要在單個路由上加入meta信息，上邊已經加過，可參考前置路由守衛(wèi)中的meta信息，后置中沒有next（）

//全局后置路由守衛(wèi)————初始化的時候被調用、每次路由切換之后被調用
router.afterEach((to, from) => {
    document.title = to.meta.title || '默認名'    //修改網頁的title
})

組件獨享路由守衛(wèi)

組件獨享路由守衛(wèi)是某一個路由所單獨共享的守衛(wèi)，組件獨享路由守衛(wèi)需要在路由信息中配置，組件獨享路由守衛(wèi)只有前置，沒有后置，當然有離開時的鉤子函數(shù)，這里不做贅述

    {
        path: '/',
        name: 'HomePage',
        component: () => import('../views/HomePage.vue'),
        meta: { isAuth: true },
        beforeEnter: (to, from, next) => {
            if (to.meta.isAuth) { 
                if (localStorage.getItem('xxx') === 'xxx') {
                    next()  //放行
                } else {
                    // 或者跳轉某一指定路由
                    alert('抱歉，您無權限查看！')
                }
            } else {
                next()  //放行
            }
        }
    },

組件內路由守衛(wèi)?

首先位置方面是寫在組件內部的路由守衛(wèi)，寫在.vue文件之中文章來源地址http://www.zghlxwxcb.cn/news/detail-500265.html

//通過路由規(guī)則，進入該組件時被調用
beforeRouteEnter(to,from,next) {
  if(toString.meta.isAuth){
    if(localStorage.getTime('xxx')==='xxx'){
      next()
    }else{
      alert('無權限查看！')
    }
  } else{
    next()
  }
},
 
//通過路由規(guī)則，離開該組件時被調用 
beforeRouteLeave(to,from,next) {
 next()
}

到了這里，關于vue-router路由守衛(wèi)的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！