vue路由每次訪問相同的路由，都會刷新

在項目做得差不多的時候，突然產品提了個這樣的需求，例如頁面導航目前在首頁，再點擊一次首頁頁面要刷新重新渲染，這個刷新不是F5的那種刷新

接到這個需求后我也在網上找了很多資料，例如：https://blog.csdn.net/qq_39009348/article/details/81700082

文章里說的方法也可以解決問題，但是在項目已經做得差不多的時候，這樣要在每個頁面都修改就很難受了，所以文章里的方法不適合我

 

1.我換了種方式，一開始App.vue用的是文章里提到的方法，這個是繞不開的，這里我用了Vuex全局狀態控制來代替原文章里reload方法的作用

<template>
  <div id="app">
    <router-view  v-if="isRouterAlive"/>
  </div>
</template>
<script>
  export default {
    computed:{
      isRouterAlive(){
        return this.$store.state.isRouterAlive // 用來解決路由相同不刷新問題
      }
    }
  }
</script>

2.在store.js文件里定義isRouterAlive屬性

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    isRouterAlive: true
  },
  mutations: {
    setIsRouterAlive(state,data){
      state.isRouterAlive = data;
    }
  },
  actions: {
    setIsRouterAlive(context,data){
      context.commit("setIsRouterAlive",data)
    }
  }
})

3.監聽store的屬性，避免異步問題

/**
 * 監聽isRouterAlive，
 * 當被設為false時，
 * 將它設為true，避免異步問題
 */
store.watch(
  // 當返回結果改變...
   (state) => {
    return state.isRouterAlive
  },
  // 執行回調函數
  (newVal,oldValue) => {
    if(!newVal){
      store.dispatch('setIsRouterAlive', true)
    }
  }
)

4.修改路由router.js，前置路由守衛攔截

import Vue from 'vue'
import Router from 'vue-router'
import store from '@/store'
// 立個flag，標識是不是第一次路由（F5刷新后第一次路由）
let flag = true;
//路由攔截器
// to: Route: 即將要進入的目標 路由對象
//from: Route: 當前導航正要離開的路由
router.beforeEach((to, from, next) => {
  to.query.timestamp = new Date().getTime(); // 每次路由都加上參數，確保每次路由都能被攔截
  if (to.path === from.path && Object.keys(to.query).length === 1 && !flag) { // 路由地址一樣，參數個數等於1，也就是只有上面設置的默認參數，不是第一次路由
    store.dispatch('setIsRouterAlive', false); // 設置isRouterAlive為false
    
  }
  next();
  flag = false;

});
export default router;

這樣子就實現了我的需求，只用修改4個文件，代碼量不多，to.query.timestamp = new Date().getTime();這行代碼很關鍵，沒有這行代碼，路由相同的路由時是沒有任何一點反應的，不會進入守衛也不會被watch監聽到，