全局守衛(wèi)

你可以使用 router.beforeEach 注冊一個全局前置守衛(wèi)：

const router = new VueRouter({ ... })

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

當(dāng)一個導(dǎo)航觸發(fā)時，全局前置守衛(wèi)按照創(chuàng)建順序調(diào)用。守衛(wèi)是異步解析執(zhí)行，此時導(dǎo)航在所有守衛(wèi) resolve 完之前一直處于 等待中。

每個守衛(wèi)方法接收三個參數(shù)：

• to: Route: 即將要進(jìn)入的目標(biāo) 路由對象

• from: Route: 當(dāng)前導(dǎo)航正要離開的路由

• next: Function: 一定要調(diào)用該方法來 resolve 這個鉤子。執(zhí)行效果依賴 next 方法的調(diào)用參數(shù)。

  • next(): 進(jìn)行管道中的下一個鉤子。如果全部鉤子執(zhí)行完了，則導(dǎo)航的狀態(tài)就是 confirmed （確認(rèn)的）。

  • next(false): 中斷當(dāng)前的導(dǎo)航。如果瀏覽器的 URL 改變了（可能是用戶手動或者瀏覽器后退按鈕），那么 URL 地址會重置到 from 路由對應(yīng)的地址。

  • next('/') 或者 next({ path: '/' }): 跳轉(zhuǎn)到一個不同的地址。當(dāng)前的導(dǎo)航被中斷，然后進(jìn)行一個新的導(dǎo)航。

  • next(error): (2.4.0+) 如果傳入 next 的參數(shù)是一個 Error 實例，則導(dǎo)航會被終止且該錯誤會被傳遞給 router.onError() 注冊過的回調(diào)。

確保要調(diào)用 next 方法，否則鉤子就不會被 resolved。

下面寫一個例子：

1. 列舉需要判斷登錄狀態(tài)的“路由集合”，當(dāng)跳轉(zhuǎn)至集合中的路由時，如果“未登錄狀態(tài)”，則跳轉(zhuǎn)到登錄頁面LoginPage；
2. 當(dāng)直接進(jìn)入登錄頁面LoginPage時，如果“已登錄狀態(tài)”，則跳轉(zhuǎn)到首頁HomePage；

import Vue from 'vue';
import Router from 'vue-router';
import LoginPage from '@/pages/login';
import HomePage from '@/pages/home';
import GoodsListPage from '@/pages/good-list';
import GoodsDetailPage from '@/pages/good-detail';
import CartPage from '@/pages/cart';
import ProfilePage from '@/pages/profile';

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/',  // 默認(rèn)進(jìn)入路由
      redirect: '/home'   //重定向
    },
    {
      path: '/login',
      name: 'login',
      component: LoginPage
    },
    {
      path: '/home',
      name: 'home',
      component: HomePage
    },
    {
      path: '/good-list',
      name: 'good-list',
      component: GoodsListPage
    },
    {
      path: '/good-detail',
      name: 'good-detail',
      component: GoodsDetailPage
    },
    {
      path: '/cart',
      name: 'cart',
      component: CartPage
    },
    {
      path: '/profile',
      name: 'profile',
      component: ProfilePage
    },
    {
      path: '**',   // 錯誤路由
      redirect: '/home'   //重定向
    },
  ]
});

// 全局路由守衛(wèi)
router.beforeEach((to, from, next) => {
  console.log('navigation-guards');
  // to: Route: 即將要進(jìn)入的目標(biāo) 路由對象
  // from: Route: 當(dāng)前導(dǎo)航正要離開的路由
  // next: Function: 一定要調(diào)用該方法來 resolve 這個鉤子。執(zhí)行效果依賴 next 方法的調(diào)用參數(shù)。

  const nextRoute = ['home', 'good-list', 'good-detail', 'cart', 'profile'];
  let isLogin = global.isLogin;  // 是否登錄
  // 未登錄狀態(tài)；當(dāng)路由到nextRoute指定頁時，跳轉(zhuǎn)至login
  if (nextRoute.indexOf(to.name) >= 0) {  
    if (!isLogin) {
      console.log('what fuck');
      router.push({ name: 'login' })
    }
  }
  // 已登錄狀態(tài)；當(dāng)路由到login時，跳轉(zhuǎn)至home 
  if (to.name === 'login') {
    if (isLogin) {
      router.push({ name: 'home' });
    }
  }
  next();
});

export default router;