最近在开发过程中遇到如下问题:

当前路由是这样的

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-router 组件实例被复用问题的更多相关文章

  1. [Vue 牛刀小试]:第十四章 - 编程式导航与实现组件与 Vue Router 之间的解耦

    一.前言 在上一章的学习中,通过举例说明,我们了解了 Vue Router 中命名路由.命名视图的使用方法,以及如何通过 query 查询参数传参,或者是采用 param 传参的方式实现路由间的参数传 ...

  2. vue函数式组件详解

    本篇将详细介绍vue组件化之函数式组件,会用到以下api: Vue.component().Vue.extend().$createElement.patch(). 从事vue开发的小伙伴,平时组件化 ...

  3. python 全栈开发,Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)

    昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...

  4. Vue.js—组件快速入门以及实例应用

    上次我们学习了Vue.js的基础,并且通过综合的小实例进一步的熟悉了Vue.js的基础应用.今天我们就继续讲讲Vue.js的组件,更加深入的了解Vue,js的使用.首先我们先了解一下什么是Vue.js ...

  5. Vue.js—组件快速入门及Vue路由实例应用

    上次我们学习了Vue.js的基础,并且通过综合的小实例进一步的熟悉了Vue.js的基础应用.今天我们就继续讲讲Vue.js的组件,更加深入的了解Vue,js的使用.首先我们先了解一下什么是Vue.js ...

  6. Vue简单基础 + 实例 及 组件通信

    vue的双向绑定原理:Object.defineProperty() vue实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来劫 ...

  7. vue中如何编写可复用的组件?

    原文地址 Vue.js 是一套构建用户界面的渐进式框架.我们可以使用简单的 API 来实现响应式的数据绑定和组合的视图组件. 从维护视图到维护数据,Vue.js 让我们快速地开发应用.但随着业务代码日 ...

  8. vue构造函数(根实例化时和组件实例对象选项)参数:选项详解

    实例选项(即传给构造函数的options):数据,DOM,生命周期钩子函数,资源,组合,其他 数据 data 属性能够响应数据变化,当这些数据改变时,视图会进行重渲染. 访问方式: 1.通过 vm.$ ...

  9. Vue Router根据后台数据加载不同的组件(思考->实现->不止于实现)

    实际项目中遇到的需求 同一个链接需要加载不同的页面组件.根据用户所购买服务的不同,有不同的页面展现. 有一些不好的实现方式 直接把这几个组件写在同一个组件下,通过v-if去判断.如果这么做的话,甚至可 ...

随机推荐

  1. Error:Execution failed for task ':app:processDebugGoogleServices'. > No matching client found for package name 'com.fortythree.sos.flashlight'

    Q:导入json文件时的包名不对 A:包名存在的位置是app build gradle中的applicationID

  2. C# Redis实战(六)

    六.查询数据 在C# Redis实战(五)中介绍了如何删除Redis中数据,本篇将继续介绍Redis中查询的写法. 1.使用Linq匹配关键字查询 using (var redisClient = R ...

  3. jQuary学习の三の效果展示

    一.隐藏显示 1.$(selector).hide(speed,callback);2.$(selector).show(speed,callback); 可选的 speed 参数规定隐藏/显示的速度 ...

  4. Problem : 1196 ( Lowest Bit )

    第一次一次通过,逻辑太简单... #include<iostream> using namespace std; void main() { int n; while(cin>> ...

  5. Problem : 1002 ( A + B Problem II )

    经验总结:一定要注意输出的格式,字符的空格,空行,一定要观察清楚.如本题的最后一个输出结果后面没有空行.最后代码实现的时候需要判断一下,代码如下 !=n) cout<<endl; Prob ...

  6. 关于win系统下Anaconda与TensorFlow的安装相关事宜以及错误:ImportError: No module named 'tensorflow'的解决

    1.安装TensorFlow之前应该先安装Anaconda,不需要安装python,否则会出问题,我安装的版本是Anaconda3-4.2.0-Windows-x86_64,在这个链接上可以找到--h ...

  7. zabbix添加自定义监控项

    zabbix添加自定义监控项 author:headsen  chen   2017-10-16  17:23:17 个人原创,转载请注明作者,出处,否则依法追究法律责任 主机端配置: 首先安装好za ...

  8. http状态码是什么,有什么用,在哪里查看,分别代表什么意思?

    写在前面: 当浏览者访问一个网页时,浏览者的浏览器会向网页所在服务器发出请求.当浏览器接收并显示网页前,此网页所在的服务器会返回一个包含HTTP状态码的信息头用以响应浏览器的请求.本文主要是:关于ht ...

  9. Android GC Log

    最近在研究Android内存垃圾回收的内容,遇到一些自己之前不知道的技巧和方法.现在分享一种简单的在Logcat中可以看到垃圾回收状态的方法.经常关注Logcat日志的童鞋偶尔会看到一条类似于以下形式 ...

  10. ClickOnce清单签名取消后依然读取证书的问题

    在 http://www.cnblogs.com/heroius/p/8270004.html 和 http://www.cnblogs.com/heroius/p/8278796.html中,通过编 ...