Vue中导航守卫

谁践踏了优雅 2022-02-28 03:08 309阅读 0赞

导航守卫有三种：

  1. 全局守卫：在router.js中，对router对象进行守卫设置beforeEach函数，router内所有的路径出入都要被守卫盘问

    router.beforeEach((to, from, next) => {

    1.  if(to.path == '/community/academic') { //对全局进行守卫，对所有的路径都进行了盘问
    2.    const answer = window.confirm("你还没哟登录，是否要登录？");
    3.    if(answer){ //用户点击确定，将跳转到personnal路径页面
    4.      next('/community/personal')
    5.    }else {  //否则用户停留原来页面
    6.      next(false);
    7.    }
    8.  }else {
    9.    next()
    10.  }

    })
    export default router;

  2. 路由独享守卫：在某个路由中设置beforeEnter函数，凡是要进入该路由的都会被守卫盘问

    {

    1.        path: '/community/academic',
    2.        name: 'academic',
    3.        component: Academic,
    4.        //路由独享守卫
    5.        beforeEnter (to, from, next) {
    6.          const anwser = confirm("你还没有登录，登录后才可以浏览，确定登录吗？");
    7.          if(anwser){
    8.            next({name: 'personal'}) //用户点击确定，跳转到登录页面
    9.          }else {
    10.            next(false); // 否则还停留在原来页面
    11.          }
    12.        }
    13.      }

  3. 组件内守卫：在组件中设置beforeRouteEnter函数，凡是要显示该路由组件的，都要被守卫盘问

还有一个beforeRouteLeave函数，当从有该路由组件的页面离开时，会执行该函数

  1. beforeRouteLeave (to, from, next) {
  2.     const answer = confirm("你确定要离开吗？");
  3.     if(answer) {
  4.       next()
  5.     }else {
  6.       next(false) 
  7.     }
  8.   },

注意：beforeRouteEnter函数在data（）函数之前，即，调用beforeRouterEnter函数时，组件还没有初始化。此时不能使用this来代表实例组件；

不过，to对象中的matched[0]是路由组件Academic的父路由组件Community；matched[1]是路由组件Academic自己。所以可以通过to.matched[1] 来代替实例。

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70

注意：对于router-link标签而言，该页面的beforeRouterLeave函数在该标签的事件之前触发，准确的说，存在beforeRouterLeave时，该标签事件无效、不会触发。

解决办法：将该标签的事件所要处理的逻辑写在beforeRouterLeave函数之内，在进行调整之前，执行想要提前处理的逻辑

发表评论

表情：
评论列表 （有 0 条评论，309人围观）

还没有评论，来说两句吧...

相关阅读

    相关 VUE导航守卫

    为了阻止非法用户对受限资源的访问，Web服务器通过过滤器和拦截器，进行客户端请求的拦截。在身份验证通过后，才能继续访问目标资源，否则跳转登录或错误页面。 但是，这种方式只能限

    亦凉亦凉/ 0 赞/ 117 阅读

    相关 vue 路由--- 导航守卫

    个人理解：路由跳转是一个大的过程，就跟组件的创建一样，不是涉及组件的创建 -- 销毁，那么路由的跳转也同样涉及到这个过程。（对接springmvc里面的拦截器，spring的a

    ╰+攻爆jí腚メ╰+攻爆jí腚メ/ 0 赞/ 173 阅读

    相关 vue之导航守卫,vuex

    vue之导航守卫 首先在这里说明一下导航守卫是个什么东西 其实就好比一个门卫你带有工作证我就让你进去，没有的话就不让你进去，常用于登录购物车之类需要用户信息的页面

    朱雀朱雀/ 0 赞/ 254 阅读