vue 跳转同一路由,页面不刷新解决方案集锦

问题原因 ： vue官网详细解释说明使用同一路由携带不同参数，本质上是重用相同的组件实例，默认在跳转路由时会采用缓存策略,并不会刷新当前路由组件，因此不会调用组件的生命周期挂钩

解决方案1 - 监听路由变化

官方提供的解决方案为要对同一组件更改做出反应，监听$route的变化，或者使用使用2.2中引入的beforeRouteUpdate 导航卫士，调用对应的方法

//#/mk_gsui?id=2
// 监控data中的数据变化
watch: {
    $route(to, from) {
      if (this.$route.query.id) {
        console.info( "加载页面数据" );
      }
    }
},


//或者使用beforeRouteUpdate 导航守卫监听路由变化
beforeRouteUpdate(to, from, next) {
    console.info("==当前路由id==" + this.$route.query.id);
    if (this.$route.query.id) {
      console.info("加载页面数据");
    }
    next();
},

注意：

• 该方案可以在监听方法中完成希望在vue生命周期初始化过程中的业务逻辑，加载相关的数据;可以实现页面重新加载数据效果,但是滚动条并未重置，因此需要对滚动条进行重置处理；
• 当页面刷新后，此时会认为路由并未发生改变，虽然此时watch中的$route或者beforeRouteUpdate 路由监听均视作无变化，但是会正常执行生命周期，因此不存在刷新出错的问题；

解决方案2 --- 给路由添加唯一key

如果想强制刷新，可以在根路由上为其分配一个唯一key。采用$route.fullpath作为其唯一key。这样vue就回认为内部路由每个都是不同的路由，在跳转时便会强制刷新组件

// layout.vue
<template>
  <div class="mk-container">
    <!-- <mk-header class="mk_nav_header"></mk-header> -->
    <keep-alive>
      <router-view class="mk_nav_content" v-if="$route.meta.keepAlive" :key="$route.fullPath"></router-view>
    </keep-alive>
    <router-view class="mk_nav_content" v-if="!$route.meta.keepAlive" :key="$route.fullPath"></router-view>
    <!-- <mk-footer class="mk_nav_footer"></mk-footer> -->
  </div>
</template>

//test.vue

methods: {
    /**
     * @description: 同路由携带不同参数跳转
     * @param {type}
     * @return:
     */
    sameRouteSkip() {
      this.$router.push({
        path: "/mk_gsui",
        query: {
          id: Math.ceil(Math.random()*100)
        }
      });
    },
}

方案3. provide和inject结合使用-利用v-if原理重载路由

思路 ： 通过v-if 对进行摧毁和重建，强行使页面进行重新渲染,感谢大佬的分享的方法，哈哈!

// app.vue
<template>
  <div id="app" v-if="routerAlive">
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      routerAlive: true
    };
  },
  provide() {
    return {
      routerRefresh: this.routerRefresh
    };
  },
  created() {},
  methods: {
    /**
     * @description: 路由销毁重建（解决跳转同一路由不刷新问题）
     * @param {type} 
     * @return: 
     */
    routerRefresh() {
      this.routerAlive = false;
      this.$nextTick(() => {
        this.routerAlive = true;
      });
    }
  }
};
</script>

//payOrderList.vue

export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  inject: ["routerRefresh"], //在子组件中注入在父组件中创建的属性
  data() {
    // 这里存放数据
    return {
      activeTab: 0,
      payStatus: 0,
      list: []
    };
  },
  //使用beforeRouteUpdate 导航守卫监听路由变化;对路由销毁重建
  beforeRouteUpdate(to, from, next) {
    this.routerRefresh(); //路由销毁重建方法
    next();
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.$nextTick(() => {
      this.onRefresh("init");
    });
  },
  // 方法集合
  methods: {
    /**
     * @description: 跳到交费查询界面
     * @param {type}
     * @return:
     */
    goPaiedRecord() {
      this.$router.push({
        path: "/payOrderList",
        query: {
          payStatus: 1
        }
      });
    },
  }
};

使用beforeRouteUpdate 导航守卫监听路由变化,使用从父组件注入的方法进行路由的销毁重建，完美解决这个问题！