Use the meta of vue-router, where requireLogin indicates that the component needs to log in, and you can add different states according to actual needs
{
path: '/main-page',
name: 'MainPage',
component: MainPage,
meta: {
requireLogin: true
}
Listen for route changes in beforeEach, and if the target component needs to log in, jump the page according to the situation
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()
}
)