使用vue-router的meta,其中requireLogin表示该组件需要登录,也可以根据实际需求增加不同的状态
{
path: '/main-page',
name: 'MainPage',
component: MainPage,
meta: {
requireLogin: true
}
在beforeEach中监听路由改变,如果目标组件需要登录,则根据情况跳转页面
router.beforeEach((to, from, next) => {
// console.log(to, from, next)
console.log(
to.meta
)
if (to.meta.requireLogin) {
console.log('该组件需要登录权限');
// 跳转到登录页面
// next('/login')
next({name: 'login'})
}
next()
}
)