watch一个路由对象this.$route

例子1:

https://github.com/PanJiaChen/vue-element-admin/blob/master/src/views/login/index.vue

 watch: {
    $route: {
      handler: function(route) {
        const query = route.query
        if (query) {
          this.redirect = query.redirect //
          //
          //
          this.otherQuery = this.getOtherQuery(query)
        }
      },
      immediate: true
    }
  },

上面的代码中,query是vue router的路由对象属性,redirect 是路由的重定向属性,为 vud-element-admin 的路由配置项:“在面包屑中点击会重定向去的地址”

Vue-element-admin 官方文档中,panjiachen对上述代码的解说

在用 spa(单页面应用) 这种开发模式的之前,用户每次点击侧边栏都会重新请求这个页面,用户渐渐养成了点击侧边栏当前路由来刷新 view 的习惯。但现在 spa 就不一样了,用户点击当前高亮的路由并不会刷新 view,因为 vue-router 会拦截你的路由,它判断你的 url 并没有任何变化,所以它不会触发任何钩子或者是 view 的变化。

我本人在公司项目中,现在采取的方案是判断当前点击的菜单路由和当前的路由是否一致,但一致的时候,会先跳转到一个专门 Redirect 的页面,它会将路由重定向到我想去的页面,这样就起到了刷新的效果了。

例子2:

https://github.com/geektime-geekbang/geektime-vue-1/blob/master/router-demo/src/components/RouterChildrenDemo.vue

<template>
  <div>
    {{routerInfo}}
  </div>
</template>
<script>
export default {
  computed: {
    routerInfo() {
      const { fullPath, path, name, params, query, meta } = this.$route
      return {
			fullPath, path, name, params, query, meta
      }
    }
  }
}
</script>

官方参考
https://router.vuejs.org/zh/api/#路由对象属性
https://router.vuejs.org/zh/api/#注入的属性

this.$route
当前激活的路由信息对象。这个属性是只读的,里面的属性是 immutable (不可变) 的,不过你可以 watch (监测变化) 它。

  • 3
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值