标签：vue 登录 值为 next 守卫 组件 router 导航 路由

/*

  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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。