在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裏最後一次記錄) 跳轉過來的那個頁面。