$router和$route的区别

$router是一个VueRouter的实例 可以导航到不同的路由里

$route是$router跳转到的当前一个对象，里面包含该对象的path、query、name 、params

用法 ： this.$router.push() 跳转到指定的url 会向history栈添加一个记录 点击后退会返回上一页面

1、this.$router.push(path{:}^{\prime }/detai{l}^{\prime },query:)this.$router.push(’/detail’)

使用当前的query this.$route.query

2、this.$router.push({name:‘detail’,params:{}})

使用当前的params this.$route.params

this.$router.replace() 跳转到指定的url 不会向history栈添加一个记录 点击后退会返回上上一页面 上一个记录是不存在的

this.$router.go(n) 向前或向后跳转多少个页面（类似于 window.history.go()）

watch一个路由对象this.$route

 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 的页面，它会将路由重定向到我想去的页面，这样就起到了刷新的效果了。