接上一篇 Vue axios 二次封装。 当前项目进入内页必须是已登录状态，所以每个路由（除’login‘）在进入之前都要验证权限。 vue-router 的 beforeEach 方法恰好可以路由拦截和实现导航守卫。 这篇记录一下实现过程，和遇到对一些问题。

// src/router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import Layout from '@/components/Layout'
import Home from '@/components/Home'
import Login from '@/components/Login'
import DemoPage from '@/components/DemoPage'

Vue.use(Router)

const router = new Router({
  mode: 'history',
  routes: [
    { path: '*', redirect: '/' },
    {
      path: '/Login',
      name: 'Login',
      component: Login
    },
    {
      path: '/',
      // name: 'Layout',
      component: Layout,
      children: [
        {
          path: '/',
          name: 'Home',
          component: Home,
          meta: { requiresAuth: true }
          component: Home
        },
        {
          path: 'DemoPage',
          name: 'DemoPage',
          component: DemoPage,
          meta: { requiresAuth: true }
          component: DemoPage
        }
      ]
    },
  ]
})

router.beforeEach((to, from, next) => { // 路由登陆拦截
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // this route requires auth, check if logged in
    // if not, redirect to login page.
    if (!localStorage.getItem('token')) {
      next({
        path: '/Login',
        query: { redirect: to.fullPath }
      })
    } else {
      next()
    }
  } else {
    next() // make sure to always call next()!
  }
})

export default router

总结 项目是SPA，模块切下来整体两层，外层是 layout 层，内层是 view 层。 中间遇到了一个问题，就是在内页当二级路由跳一级路由的时候，使用 path 跳转失败，而使用 name 跳转正常。 原因还在找，如果有知道希望可以留言啦～