3.next('/")或者next( { path: '/' } )：跳轉(zhuǎn)到一個同的地址。當(dāng)前的導(dǎo)航被中斷，然后進行下一個新的導(dǎo)航。你可以想next傳遞任意對象，且允許設(shè)置諸如replace:true、name:'home‘ 之類的選項以及任何用下router-link的 to prop或者router.push中的選項

確保next函數(shù)在任何給定的導(dǎo)航守衛(wèi)中被嚴格調(diào)用一次，它可以出現(xiàn)多余一次，但是只能在所有的邏輯路徑都不重疊的情況下，否則鉤子永遠都不會被解析或者錯誤。

1.1.1 使用

可以打印出from、to、next看他們究竟會保存那些信息

舉例

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
import News from '../views/News.vue'
import Message from '../views/Message.vue'
 
Vue.use(VueRouter)
 
const routes = [{
    path: '/home',
    name: 'Home',
    component: Home,
    children:[
      {
        path: 'message', //此處不要寫成：/news
        component: Message
      }
    ]
  },
  {
    path: '/about',
    name: 'aboutName',
    component: About,
    children: [{ //通過children配置子級路由
      path: 'news', //此處不要寫成：/news
      component: News
    }]
  }
]
 
const router = new VueRouter({
  routes
})
 
//全局前置路由守衛(wèi)---初始化的時候被調(diào)用、每次路由切換的時候被調(diào)用
router.beforeEach((to, from, next) => {
  console.log(to);
  //這里是一個簡單的例子
  //即判斷用戶是否進入了需要鑒權(quán)的路由下（這里距離為news和message）
  if (to.path == '/home/message' || to.path === '/about/news') {
    //如果進入了，那就判斷本地是否緩存了信息（這里模擬登錄的token)
    if (localStorage.getItem('name') === 'haungzhizhen') {
      next()
    }
  }else{
    //如果不是，則直接放心即可
    next()
  }
})
export default router

上面這個例子有個不足之處是，當(dāng)需要鑒權(quán)的路由很多的時候，那你需要一個一個的去判斷？那大可不必，因此這里引入路由的另一屬性，即meta，可以在每個路由中進行配置，一般用來標識具有標識性的屬性，可以用力啊同意判斷，具體如下：

//使用meta
router.beforeEach((to, from, next) => {
  console.log(to);
  if (to.meta.isAuth) {//判斷是否需要鑒權(quán)
    if (localStorage.getItem('name') === 'haungzhizhen') {
      next()
    }
  } else {
    next()
  }
})

1.2 全局后置路由守衛(wèi)

//全局后置路由守衛(wèi)---初始化的時候被調(diào)用、每次路由切換之后被調(diào)用
router.afterEach((to, from) => {
  if (to.meta.title) {
    document.title = to.meta.title || '路由跳轉(zhuǎn)舉例'//修改網(wǎng)頁的title
  }else{
    document.title = 'vue_test'
  }
})

1.3 整合

2. 路由獨享的守衛(wèi)

你可以在路由配置直接定義beforeEnter守衛(wèi)，這些參數(shù)與全局前置守衛(wèi)的方法參數(shù)是一樣的

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

3.組件內(nèi)的守衛(wèi)

最后，你可以在路由組件內(nèi)直接定義一下路由導(dǎo)航守衛(wèi)：

beforeRouterEnter
beforeRouterUpdate
beforeRouterLeave

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

到此這篇關(guān)于Vue中路由守衛(wèi)的具體使用的文章就介紹到這了,更多相關(guān)Vue 路由守衛(wèi)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: