例子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 (监测变化) 它。

Logo

开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!

更多推荐