vue导航守卫
作者：互联网
/*
https://router.vuejs.org/zh/guide/advanced/navigation-guards.html
1、全局守卫（在所有路由展示前触发）
router.beforeEach((to, from, next) => { //在引入router组件的页面里使用（main.js）
to 即将要进入的到的路由，值为路由
from 离开的路由（从哪个路由离开）,值为路由
next 值为函数，这个函数决定你接下来要展示的路由页面
});
2、后置钩子（在所有路由展示后触发）
router.afterEach((to,from)=>{ //在引入router组件的页面里使用（main.js）
to 即将要进入的到的路由，值为路由
from 离开的路由（从哪个路由离开）,值为路由
});
3、路由独享的守卫（在当前路由展示前触发）
beforeEnter(to, from, next){ //在路由内部使用
to 即将要进入的到的路由，值为路由
from 离开的路由（从哪个路由离开）,值为路由
next 值为函数，这个函数决定你接下来要展示的路由页面
};
4、组件内的守卫
beforeRouteEnter(to, from, next){ //在路由组件内使用
//在当前路由被展示前调用
};
beforeRouteUpdate(to, from, next){ //在路由组件内使用
//在当前路改变时调用
};
beforeRouteLeave(to, from, next){ //在路由组件内使用
//在离开当前路时调用
};
*/
// 全局守卫
/* router.beforeEach((to,from,next)=>{
//alert('你还没有登录，请登录！');
//next();
//console.log(to);
if(to.path==='/login'){ //如果点击的是登录的那个路由，那直接跳转
next();
}else{ //点击的不是登录的路由，那就跳转到登录的路由
alert('你还没有登录，请登录！');
next('/login');
}
}); */
// 后置钩子
/* router.afterEach((to,from)=>{ //在引入router组件的页面里使用（main.js）
alert('这是后置钩子函数');
}); */
标签：vue,登录,值为,next,守卫,组件,router,导航,路由 来源： https://blog.csdn.net/weixin_62273462/article/details/122020993