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

最新推荐文章于 2024-09-23 00:11:04 发布

moonKing_yue

最新推荐文章于 2024-09-23 00:11:04 发布

阅读量1.5w

点赞数 13

分类专栏：前端开发 vue 文章标签： vue.js

本文链接：https://blog.csdn.net/qq_35897953/article/details/107906851

版权

本文探讨了在Vue中遇到同一路由跳转但页面不刷新的问题，包括官方推荐的监听路由变化、使用beforeRouteUpdate导航卫士、为路由添加唯一key以及结合provide和inject利用v-if原理重载路由的解决方案。这些方法旨在确保组件实例在参数变化时能正确更新并刷新数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题原因： 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();
},

注意：