浅谈针对Vue相同路由不同参数的刷新问题
更新时间：2018年09月29日 14:19:36 作者：Fiend
这篇文章主要介绍了浅谈针对Vue相同路由不同参数的刷新问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
在使用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值来完成更详细的说明
这样直接为组件绑定与路由参数关联的值即可
<MyComponent :key="routeParams" />
综合来看，第三种方式最简单，推荐使用。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了vue大屏展示适配，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
在Vue3中,推荐使用::deep作为深度选择器,它比Vue2中的::v-deep语法更简洁,::v-deep、::deep、:deep()、>>>和/deep/都是用于穿透组件作用域的选择器,但Vue3更倾向于使用::deep或:deep(),感兴趣的朋友跟随小编一起看看吧2024-10-10
这篇文章主要介绍了vue内嵌iframe跨域通信,主要介绍了Vue组件中如何引入iframe，vue如何获取iframe对象以及iframe内的window对象，结合实例代码给大家介绍的非常详细需要的朋友可以参考下2022-11-11
本文主要介绍了ElementUI 复杂顶部和左侧导航栏实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-04-04
Vue Computed中get和set的用法及Computed与watch的区别
这篇文章主要介绍了Vue Computed中get和set的用法及Computed与watch的区别,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
这篇文章主要为大家详细介绍了vue实现全屏滚动效果，非fullpage.js，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-03-03
估计有不少人遇过这样的需求:根据后台数据动态添加路由和菜单,这篇文章主要给大家介绍了关于前端vue如何根据菜单自动生成路由的相关资料,需要的朋友可以参考下2024-04-04
在日常业务开发中我们会经常封装一些业务组件,下面这篇文章主要给大家介绍了关于Vue组件的实现原理,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2023-01-01
这篇文章主要介绍了Vue如何在原窗口与新窗口打开外部链接,文中给大家提到了vue跳转外部链接的实现代码，本文给大家介绍的非常详细，需要的朋友可以参考下2023-02-02
这篇文章主要给大家介绍了关于如何通过一个简单的例子学会vuex与模块化的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。2017-11-11
最新评论