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>