Vue路由切换问题

Vue路由问题总结

直接获取路由实例数据

this.$router.options.routes

Vue路由切换导致销毁钩子函数不生效的原因

• 提醒一下，当使用路由参数时，例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用
• 复用组件时，想对路由参数的变化作出响应的话，你可以简单地 watch (监测变化) $route 对象：

  watch: {
      '$route' (to, from) {
        // 对路由变化作出响应...
        next()
      }
  }

• 或者使用 2.2 中引入的 beforeRouteUpdate 导航守卫：

  beforeRouteLeave(to, from, next) {
      // ....
      next()
  },
  beforeRouteEnter(to, from, next) {
      // ....
      next()
  },
   beforeRouteUpdate (to, from, next) {
      // ....
      next()
    }

• beforeRouteUpdate需要注意

  当前路由改变，但是该组件被复用时调用。例如带动态参数的路径 /user/:id，否则不生效

  路由参数

  to: Route: 即将要进入的目标 路由对象
  from: Route: 当前导航正要离开的路由
  next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
  next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed （确认的）。
  next(false): 中断当前的导航。如果浏览器的 URL 改变了（可能是用户手动或者浏览器后退按钮），
  那么 URL 地址会重置到 from 路由对应的地址。
  next(‘/’) 或者 next({ path: ‘/’ }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航

赏

谢谢你请我吃糖果

支付宝

微信