浅谈针对Vue相同路由不同参数的刷新问题

以你之姓@ 2022-04-25 00:30 503阅读 0赞

> **小编推荐：[Fundebug][]提供JS错误监控、微信小程序错误监控、微信小游戏错误监控，Node.j错误监控和Java错误监控。真的是一个很好用的错误监控费服务，众多大佬公司都在使用。**

在使用vue和vue-router开发spa应用时，我们会遇到这样一种问题。

当页面跳转时，组件本身并没有发生改变：

// 路由映射关系'/form/:type'
    // 当前页面路由/form/shop1
    this.$router.push({ name: 'form', params: { type: 'shop2' })

这时我们进行路由跳转后会发现组件并没有刷新，在前一个路由组件的数据都保留了下来，这并不是我们想要的效果。

对于简单的数据更新，我们可以直接监听路由参数并重新获取路由的初始化数据即可，  
但是对于有很多子组件需要初始化或者reset的情况，我们还是有必要重新执行组件的生命周期。

**针对这种情况可以使用三种方式解决：**

1.为相同路由页面的跳转进行中间路由替换，在router上注册beforeEach全局守卫进行拦截，跳转到一个中间路由（例如empty），再从中间过渡路由跳转至要去的路由。

// 全局导航守卫
    router.beforeEach((to, from, next) => {
     if (to.name === from.name && to.params.type !== from.params.type) {
      next({ name: 'empty', query: { toPath: to.fullPath } })
     } else {
      next()
     }
    })
     
    // 中间过渡路由
    let toPath = this.$route.query.toPath
    if (this.toPath) {
     this.$router.push({ path: this.toPath })
    }

> 对前端的技术，架构技术感兴趣的同学关注我的头条号，并在后台私信发送关键字：“前端”即可获取免费的架构师学习资料

知识体系已整理好，欢迎免费领取。还有面试视频分享可以免费获取。关注我，可以获得没有的架构经验哦！！  
2.使用v-if重新渲染当前页面组件

// html部分
    <div>
     <router-view v-if="showRouterView"/>
    </div>
     
    // script部分
    export default {
     data () {
      return {
       isRouterAlive: true
      }
     },
     methods: {
      reload () {
       this.showRouterView = false
       this.$nextTick(() => (this.showRouterView = true))
      } 
     }
    }

> 对前端的技术，架构技术感兴趣的同学关注我的头条号，并在后台私信发送关键字：“前端”即可获取免费的架构师学习资料

这样把方法注册到跟组件上，对于想刷新的组件直接调用reload方法即可。

3.使用vue文档组件绑定的key值来进行强制刷新

vue文档说明了当你需要

*  完整地触发组件的生命周期钩子
 *  触发过渡

的时候可以利用更新组件绑定的key值来完成[更详细的说明][Link 1]

这样直接为组件绑定与路由参数关联的值即可

MyComponent :key="routeParams" />

综合来看，第三种方式最简单，推荐使用。

作者：易水人去丶明月如霜  
链接：https://www.jianshu.com/p/ecf776bda89c

[Fundebug]: https://www.fundebug.com/
[Link 1]: https://cn.vuejs.org/v2/api/#key