{
path: '/Login',
alias: '/',
name: 'Login',
component: () => import('@/views/Login.vue'),
meta: { requiresAuth: false }
},
要配合路由守卫使用
// 全局前置守卫
router.beforeEach((to, from) => {
//路由元信息:判断是否需要登录验证
if (!to.meta.requiresAuth) {
return true;
}
// 判断有没有token 如果没有的话就跳转登录页面
let token = sessionStorage.token;
if (token) {
return true
} else {
console.log(to.fullPath)
return { name: 'Login', query: { redirect: to.fullPath } };
}
})
如果每个都写得话太麻烦 meta: { requiresAuth: true },设置之后不仅一级路由 /article设置了其children 二级路由 默认也是 meta: { requiresAuth: true } 比如去/article/tag就需要登录 ,但我给二级路由list单独设置了meta: { requiresAuth: false },那么就不需要登录也能跳转到/article/list这个页面。
{
path: '/article',
name: 'Article',
component: Layout,
meta: { requiresAuth: true },
children: [
{
path: 'list',
name: 'ArticleList',
meta: { requiresAuth: false },
component: () => import('@/views/Article/List.vue'),
},
{
path: 'comment',
name: 'ArticleComment',
component: () => import('@/views/Article/Comment.vue'),
},
{
path: 'tag',
name: 'ArticleTag',
component: () => import('@/views/Article/Tag.vue'),
},
{
path: 'listedit',
name: 'ArticleListEdit',
component: () => import('@/views/Article/ListEdit.vue'),
},
{
path: 'release',
name: 'ArticleRelease',
component: () => import('@/views/Article/Release.vue'),
},
]
},