解决办法就是,判断用户的登陆状态,如果没有登陆,将路由强制转换到登陆页,在router/index.js的登陆路由配置中写入
routes: [{
path: '/',
name: 'LoginIn',
component: resolve => require(['../pages/login/Login.vue'], resolve)
},
{
path: '/home',
name: 'Home',
component: resolve => require(['../components/Home.vue'], resolve),
meta: {
requireLogin: true // 当前路由需要校验,不需要就不用写
},
meta:{
requiredLogin:true
}
在入口main.js内写入
router.beforeEach((to,form,next)=>{
if(to.matched.some(record=>record.meta.requireLogin)){ //判断该路由是否需要登录权限
if(getCookieValue("userInfo")){
next();
}else{
next({
path:'/'
})
}
}else{
next();
}
router.beforeEach钩子函数在路由跳转之前判断,参数:to:即将跳转的下一个路由,from:即将离开的上一个路由,next,要去的路由。next是必须的,否则不知道下一步干什么。我getCookieValuez自定义获取cookie函数,如果能拿到userInfo且不为空(已登录成功),则继续执行,如果拿不到,返回Loginin路由(登陆页面)。