场景1
有一个Mine.vue页面 中 当用户没有登录 就是显示登录和注册 当用户登录以后 就显示用户信息和退出登录按钮
登录以后再次进入
页面正常画 路由正常搭建 只需要 在mine中的路由中处理一下 判断 是否登录 用next跳转到指定路由
{
path:"",
name:"login",
component:()=>import ("../components/mine/Login.vue"),
beforeEnter: (to, from, next) => {
// console.log(to);
// console.log(from);
if(window.localStorage.getItem("userid")){//表示已经登录
next({
name:"minedetail"
})
}else{
next();
}
}
},
场景2:控制 页面只能从指定的页面进入 比如结算页面 只能从购物车页面进入 咨询页面只能从影院进入
需要对那个路由做控制 就在哪个路由里面加上路由内的独享守卫
path: '/info',
name: 'info',
alias:"/zixun",
component:Info,
beforeEnter: (to, from, next) => {//进入咨询页面的时候
// 保安就拦下来 你从哪里来 从影院来
// console.log(from);
// console.log(to);
if(from.path=="/cinema"){
next();
}else{
next({
name:"cinema"
});
}
}