vue的路由和路由守衛 2021-03-18

import Vue from "vue";
import Router from "vue-router";
import store from '../store/index';

Vue.use(Router);

const router = new Router({
  routes: [{
      path: "/",
      redirect: "/index"
    },
    {
      path: "/order",
      meta: {
        title: '我的訂單',
        needLogin: true
      },
      component: () => import("@/views/order/index")
    },
    {
      path: "/cart",
      meta: {
        title: '購物車',
        needLogin: true
      },
      component: () => import("@/views/cart/index")
    },
    {
      path: '/login',
      component: () => import('@/views/login/index'),
      meta: {
        title: '登陸'
      }
    },
    {
      path: '/index',
      component: () => import('@/views/index/index'),
      meta: {
        title: '首頁'
      }
    },
    {
      path: "/my",
      component: () => import("@/views/my"),
      redirect: '/my/center',
      children: [{
        path: 'center',
        meta: {
          title: '個人中心',
        },
        component: () => import('@/views/my/center')
      }, {
        path: 'set',
        meta: {
          title: '設置',
        },
        component: () => import('@/views/my/set')
      }]
    },
    {
     // 404配置
     path: '*',
   component: () => import('@/views/notFound')
    }
  ]
});


router.beforeEach((to, from, next) => {
  let {
    title,
    needLogin
  } = to.meta;
  // 從vuex獲取登錄狀態
  let isLogin = store.state.isLogin;
  document.title = title;

  if (needLogin && !isLogin) {
    next({
      path: '/login'
    })
  } else {
    next();
  }
})

export default router;

完整的導航解析流程
導航被觸發。
在失活的組件裏調用 beforeRouteLeave 守衛。
調用全局的 beforeEach 守衛。
在重用的組件裏調用 beforeRouteUpdate 守衛 (2.2+)。
在路由配置裏調用 beforeEnter。
解析異步路由組件。
在被激活的組件裏調用 beforeRouteEnter。
調用全局的 beforeResolve 守衛 (2.5+)。
導航被確認。
調用全局的 afterEach 鉤子。
觸發 DOM 更新。
調用 beforeRouteEnter 守衛中傳給 next 的回調函數，創建好的組件實例會作爲回調函數的參數傳入。