在vue項目中，切換路由時肯定會碰到需要登錄的路由，其原理就是在切換路徑之前進行判斷，你不可能進入頁面再去判斷有無登錄重新定向到login，那樣的話會導致頁面已經(jīng)渲染以及它的各種請求已經(jīng)發(fā)出。

一、如需要登錄的路由可在main.js中統(tǒng)一處理（全局前置守衛(wèi)）

我們可以在入口文件man.js里面進行配置，使用router.beforeEach方法，不懂得可以打印to，from的參數(shù)就ok，requireAuth可以隨意換名的，只要man.js里面跟配置路由的routes里面的字段保持一致：

import router from './router' router.beforeEach((to, from, next) => {if (to.matched.some(record => record.meta.requireAuth)){ // 判斷該路由是否需要登錄權(quán)限if(!sessionStorage.getItem('token') && !localStorage.getItem('token')){next({path: '/login',query: {redirect: to.fullPath} // 將跳轉(zhuǎn)的路由path作為參數(shù)，登錄成功后跳轉(zhuǎn)到該路由})}else{next();}}else {next();} }); new Vue({el: '#app',router,render: h => h(App) }) export default new Router({routes: [{path: '/',name: 'home',redirect: '/home'},{path: '/home',component: Home,meta: {title: '',requireAuth: true, // 添加該字段，表示進入這個路由是需要登錄的}},{path:'/login',name:'login',component:Login},{path:'/register',name:'register',component:Register}] })

如果你還有登錄以外的路由攔截判斷的話，全局的守衛(wèi)還不能滿足你，官方還提供了以下幾種路由的守衛(wèi)。

二、全局后置守衛(wèi)

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

三、單獨路由獨享守衛(wèi)（與全局一致，可單獨對某個路由進行配置）

const router = new VueRouter({routes: [{path: '/foo',component: Foo,beforeEnter: (to, from, next) => {// ...}}] })

四、組件內(nèi)部路由守衛(wèi)（可寫在與生命周期同級位置）

beforeRouteEnter (to, from, next) {// 在渲染該組件的對應路由被 confirm 前調(diào)用// 不！能！獲取組件實例 `this`// 因為當守衛(wèi)執(zhí)行前，組件實例還沒被創(chuàng)建},beforeRouteUpdate (to, from, next) {// 在當前路由改變，但是該組件被復用時調(diào)用// 舉例來說，對于一個帶有動態(tài)參數(shù)的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉(zhuǎn)的時候，// 由于會渲染同樣的 Foo 組件，因此組件實例會被復用。而這個鉤子就會在這個情況下被調(diào)用。// 可以訪問組件實例 `this`},beforeRouteLeave (to, from, next) {// 導航離開該組件的對應路由時調(diào)用// 可以訪問組件實例 `this`}

總結(jié)

以上是生活随笔為你收集整理的路由守卫-vue切换路由登录判断、条件判断的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。