Vue - 路由守卫使用

import Vue from 'vue'

import VueRouter from 'vue-router'

import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [

  {

    path: '/',

    component: Home,

    children: [

      {

        path: '/',

        name: 'home',

        meta: {

          requireAuth: true // 添加该字段，表示进入这个路由是需要登录的

        },

        component: () => import('../views/Home.vue')

      },

    ]

  },

  {

    path: '/login',

    component: () => import('../views/login/Main.vue'),

    children: [

      {

        path: '/',

        name: 'login',

        component: () => import('../views/login/Login.vue')

      },

      {

        path: '/register',

        name: 'register',

        component: () => import('../views/login/Register.vue')

      }

    ]

  }

]

const router = new VueRouter({

  mode:'history',

  routes

})

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

 

  if (to.meta.requireAuth) { // 判断是否需要登录权限

    if (to.path!='/login' && localStorage.token==undefined){

      return next({

        path: '/login'

      })

    }else{

      next()

    }

  } else {

    next()

  }

})

export default router