vue同页面跳转，实现页面重新刷新解决方案

问题描述

vue跳转同一路径时，路由参数改变，但页面无法更新

问题原因

vue路由切换实际是组件间的切换，引用相同组件的时候，组件的生命周期钩子不会再被调用,页面就无法更新

解决方案

方案1.watch监听路由参数变化(或者beforeRouteUpdate)，并重新渲染

该方式可以实现页面重新加载数据效果，滚动条没有返回顶部问题，需要让document.body.scrollTop=0;

watch: {
    '$route' (to, from) {
      // 对路由变化作出响应...
    }
  }

方案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>