钓鱼网站网址,网页美工设计素材,重庆市建设企业诚信分查询网站,制作公众号的编辑器一、什么是导航守卫#xff1f; 正如其名#xff0c;vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。这里有很多方式植入路由导航中#xff1a;全局的#xff0c;单个路由独享的#xff0c;或者组件级的。 导航守卫的三个参数
to#xff1a;将要访问的…一、什么是导航守卫 正如其名vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。这里有很多方式植入路由导航中全局的单个路由独享的或者组件级的。 导航守卫的三个参数
to将要访问的路由信息对象 from将要离开的路由信息对象 next函数 调用next()表示放行允许这次路由导航 调用next(false)表示不放行不允许此次路由导航 调用next({routerPath})表示导航到此地址一般情况用户未登录时会导航到登陆界面 提示 该函数在导航守卫中可出现多次但是只能被调用一次!!! 模拟登录注册案例
// 模拟是否登录true为登录false为未登录
let token true
router.beforeEach((to, from, next) {// 判断有没有登录if (!token) {// 如果没有登录并且是跳转至登录页if (to.name Login) {// 直接跳转next();} else {// 否则直接强制跳转至登录页router.push(/login)}} else {// 如果已经登录并且不是跳转至登录页if (to.name ! Login) {// 直接跳转next();} else {// 否则直接强制跳转至上一个页面router.push(from.path)}}
});
