解决vue路由组件vue-router实例被复用问题
最近在开发过程中遇到如下问题:
当前路由是这样的
http://127.0.0.1:3010/order?keywords=22
只改变keywords的值，路由不跳转
http://127.0.0.1:3010/order?keywords=33338
造成这样的原因如下图所示：
参考文档:https://router.vuejs.org/en/essentials/dynamic-matching.html
这种情况网上的解决方式:
使用vue-router切换路由时会触发组件树的更新，根据定义的路由渲染一个新的组件树，大致的切换过程是这样的：
- 停用并移除不需要的组件
- 验证切换的可行性
- 复用没有进行更新的组件
- 启用并激活新的组件
那vue-router是怎么判断某一个组件可以复用的呢？我们看一下下面这条路由配置：
{
path: 'post/:postId',
name: 'post',
component: resolve => require(['./components/Post.vue'],resolve)
}这是通过文章ID加载对应文章页面的路由，第一次访问时，Post.vue这个组件会被渲染到组件树中，mounted安装组件时通过文章ID获取文章内容展示到页面上，当我们访问另一篇文章时，路由参数:postId发生改变，按照我们的预期应该会展示新文章的内容，但是事与愿违。
我们看到的还是之前的文章，虽然路由参数已发生更改，但是vue-router会以为你访问的是Post.vue这个组件，由于之前已经渲染过该组件，所以会直接复用之前的组件，并且不会执行组件中的任何操作包括mounted之类的生命周期函数。
所以我们最终看到的还是原来组件的内容。
那要怎么才能实现我们期望的效果呢？下面介绍一种有效的解决方法
解决方法
我们可以使用watch侦听器来监听路由的变化情况，根据路由参数的变化来响应相应的数据，具体实现过程是这样的：
定义数据获取方法
首先定义一个获取文章的方法，根据文章ID从后台获取对应的文章信息。
methods: {
getPost(postId) {
this.$http.get(`/post/get_post/${postId}`).then((response) => {
if(response.data.code === 0){
this.post = response.data.post;
}
});
}
}监听路由
接着是在路由切换的时候判断目标组件是否是Post.vue组件，这里可以根据定义的路由名称name实现，如果是，我们就可以从路由信息中获取目标文章ID来更新组件内容。
watch: {
'$route' (to, from) {
if(to.name === 'post'){
this.getPost(to.params.postId);
}
}
}组件初始化
这里需要注意的是，当组件首次被挂载到组件树上时，对路由的监听是无效的，这时我们需要在生命周期钩子mounted对组件进行初始化工作：
mounted() {
this.getPost(this.$route.params.postId);
}到此这篇关于解决vue路由组件vue-router实例被复用问题的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
vue3:vue2中protoType更改为config.globalProperties问题
这篇文章主要介绍了vue3:vue2中protoType更改为config.globalProperties问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
当市面上主流的组件库不能满足我们业务需求的时候,那么我们就有必要开发一套属于自己团队的组件库,下面这篇文章主要给大家介绍了如何使用vue3+TS实现简易组件库的相关资料,需要的朋友可以参考下2022-03-03
下面小编就为大家带来一篇使用vue-resource进行数据交互的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
本篇文章主要介绍了浅谈Vue.js应用的四种AJAX请求数据模式，本文将详细介绍在Vue应用程序中实现AJAX的四个方法，有兴趣的可以了解一下2017-08-08
本篇文章主要介绍了vue.js $refs和$emit 父子组件交互的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
这篇文章主要为大家介绍了vue3封装echarts组件最佳形式详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
本篇文章主要介绍了VUE axios发送跨域请求需要注意的问题，在实际项目中前端使用到vue，后端使用php进行开发。前端使用axios请求请求遇到的问题，有兴趣的可以了解一下2017-07-07
Vue3使用vue-qrcode-reader实现扫码绑定设备功能(推荐)
本文介绍了在Vue3中使用vue-qrcode-reader版本5.5.7来实现移动端的扫码绑定设备功能,用户通过扫描二维码自动获取设备序列号,并填充到添加设备界面,完成设备绑定的全过程,包含ScanCode.vue和DeviceAdd.vue两个主要界面的实现方式2024-10-10
Vue3使用defineAsyncComponent实现异步组件加载的代码示例
在 Vue 3 中,异步组件加载是一种优化应用性能的重要手段,通过异步加载组件,可以减少初始加载时的资源体积,从而提升应用的加载速度和用户体验,本文将详细介绍如何使用 defineAsyncComponent 实现异步组件加载,并提供相关的代码示例,需要的朋友可以参考下2025-03-03
本文主要介绍了Vue使用lodash进行防抖节流的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
最新评论