在spa(单页面应用)开发中，点击侧边栏当前路由来刷新页面的两种方案（业界推荐使用的方案）

背景：

在用 spa(单页面应用) 这种开发模式的之前，也就是多页面开发模式下，用户每次点击侧边栏都会重新请求这个页面，用户渐渐养成了点击侧边栏当前路由来刷新 view 的习惯。

如今：

大多都是spa这种，但 spa 就不一样了，当用户点击当前高亮的路由并不会刷新 view，因为 vue-router 会拦截你的路由，它判断你的 url 并没有任何变化，所以它不会触发任何钩子或者是 view 的变化。

业界比较推荐的方案：

方案一：

通过不断改变 url 的 query 来触发 view 的变化。我们监听侧边栏每个 link 的 click 事件，每次点击都给 router push 一个不一样的 query 来确保会重新刷新 view。

样例代码如下：

clickLink(path) {
  this.$router.push({
    path,
    query: {
      t: +new Date() //保证每次点击路由的query项都是不一样的，确保会重新刷新view
    }
  })
}

前提： router-view 中要加 key。

<router-view :key="$route.path"></router-view>

方案二：

判断当前点击的菜单路由和当前的路由是否一致，在判断一致的时候，会先跳转到一个专门 Redirect 的页面，它会将路由重定向到我想去的页面，这样就起到了刷新的效果了。

点击的时候重定向页面至 /redirect。代码如下：

const { fullPath } = this.$route
this.$router.replace({
  path: '/redirect' + fullPath
})

redirect 页面代码如下：

export default {
  beforeCreate() {
    const { params, query } = this.$route
    const { path } = params
    this.$router.replace({ path: '/' + path, query })
  },
  render: function(h) {
    return h()
  }
}

注意： 上面代码使用 replace 而不是使用 push 的原因是 push 会留下history记录，replace 不会留下history记录，这样，在多次刷新同一个页面时，再次返回操作时，返回的就不会是自身路由页面了，会返回到最初来源的那个页面，即最后一次 push (history里最后一次记录) 跳转过来的那个页面。