vue跳轉同一路徑時，路由參數改變，但頁面無法更新
問題原因
vue路由切換實際是組件間的切換，引用相同組件的時候，頁面就無法更新
解決方案
方案1.watch監聽路由參數變化，並重新渲染（謹慎選擇）
該可以實現頁面重新加載數據效果，但會出現頁面單獨刷新出錯，滾動條沒有返回頂部問題，根據業務需要選擇此解決方法
方案2. provide和inject結合使用(推薦使用)
實現思路：在app.vue目錄下，對<router-view></router-view>進行摧毀和重建(通過變量routerAlive的狀態控制)，頁面會進行重新渲染。
下面是方案2的具體實現：
//app.vue <template> <div id="app"> <router-view v-if="routerAlive" /> </div> </template> <script> export default { data(){ return{ routerAlive:true } }, provide(){ return { routerRefresh: this.routerRefresh } }, methods:{ routerRefresh(){ this.routerAlive = false; this.$nextTick(()=>{ this.routerAlive = true; }); }, } } </script>
//page.vue <template> <div> <div>跳轉到當前頁,並改變參數,重新渲染</div> <button @click="linkToCurPage">跳轉</button> </div> </template> <script> export default { inject:['routerRefresh'], //在子組件中注入在父組件中創建的屬性 data() { return { paramsData:this.$route.query.paramsName,//當前頁面url所帶參數 假設為1 } }, mounted(){ //渲染頁面數據 this.getData(); }, methods:{ //頁面數據請求 getData(){ const that=this; //請求參數 let params={ params:this.paramsData }; //發送請求... }, //跳轉頁面 linkToCurPage:function(){ this.paramsData=2; //更改參數信息 this.$router.push({ path:"/page", query:{ paramsName:this.paramsData } this.routerRefresh();//調用app.vue里面的routerRefresh()方法，完成摧毀和重建過程 }, } }; </script>