正文

Vue - 路由守卫使用

IP云
IP云V管理员/3 阅读
09/08
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示
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