解决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的setup在el-tab中动态加载组件的方法,需要的朋友可以参考下2022-11-11
vue实现codemirror代码编辑器中的SQL代码格式化功能
这篇文章主要介绍了vue实现codemirror代码编辑器中的SQL代码格式化功能,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2019-08-08
uni-app是一个使用Vue.js(opens new window)开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台2022-09-09
这篇文章主要介绍了Vue 页面如何监听用户预览时间,首先需要借助vue页面的生命周期函数mounted和destroyed，分别加入开始计时和清除计时的逻辑，通过相关操作实现此功能，需要的朋友可以参考下2021-07-07
这篇文章主要为大家详细介绍了vue实现头像上传功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
这篇文章主要为大家详细介绍了vue.js实现左边导航切换右边内容，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-10-10
本文主要介绍了vue中使用 pinia 全局状态管理的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-07-07
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端。今天我们来介绍VueJs 搭建Axios接口请求工具，需要的朋友参考下本文吧2017-11-11
这篇文章主要介绍了Vue实现手机号、验证码登录（60s禁用倒计时），帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下2020-12-12
我们在开发中经常会遇到通过点击某个按钮或者文字实现图片的预览功能,这里我们分别介绍vue2和vue3里面如何实现图片预览方法,需要的朋友可以参考下2023-09-09
最新评论