组件系统是Vue的一个重要组成部分,它可以将一个复杂的页面抽象分解成许多小型、独立、可复用的组件,通过组合组件来组成应用程序,结合vue-router的路由功能将各个组件映射到相应的路由上,通过路由的变化来告诉Vue要在哪里渲染他们,实现各个组件、各个页面之间的跳转导航。

问题

使用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组件复用导致路由参数失效的问题。

本文属kMacro原创,转载请注明来源:https://zkhdev.github.io/2018/01/21/vuejs-component-reuse/

vue-router 组件复用问题的更多相关文章

  1. Vue.js 组件复用和扩展之道

    软件编程有一个重要的原则是 D.R.Y(Don't Repeat Yourself),讲的是尽量复用代码和逻辑,减少重复.组件扩展可以避免重复代码,更易于快速开发和维护.那么,扩展 Vue 组件的最佳 ...

  2. 打造 Vue.js 可复用组件

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

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

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

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

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

  5. vue 组件复用 - component

    vue 组件复用 - component vue 组件复用 就是对 component 标签的使用 先看图 下图看使用 结果: 可以看到 在箱包 这一项,我将banner 组件用了两次,我 每次 点击 ...

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

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

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

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

  8. Vue系列:Vue Router 路由梳理

    Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌.包含的功能有: 嵌套的路由/视图表 模块化的.基于组件的路由配置 路由参数. ...

  9. Vue躬行记(8)——Vue Router

    虽然Vue.js未提供路由功能,但是官方推出了Vue Router(即vue-router库),以插件的形式支持.它与Vue.js深度集成,可快速的创建单页应用(Single Page Applica ...

  10. vue Router——进阶篇

    vue Router--基础篇 1.导航守卫 正如其名,vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航.有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的 ...

随机推荐

  1. 如何使用 stack?- 每天5分钟玩转 Docker 容器技术(112)

    定义好了 stack YAML 文件,就可以通过 docker stack deploy 命令部署应用. Docker 会按照 YAML 的内容来创建各种资源.为了不重名,所有资源都会加上 stack ...

  2. SpringMVC框架(三)from标签(转)

    原文地址:http://blog.csdn.net/kutim/article/details/46682547 spring表单标签   <%@taglib uri="http:// ...

  3. sourceTree git 忽略指定文件

    按照如下步骤执行(终端命令) 1. git status modified: LovegoMall.xcworkspace/xcuserdata/Tiny.xcuserdatad/xcdebugger ...

  4. iOS 友盟推送,应用内推送启动图推送闪动黑屏,插屏推送方法报错

    以前都是用的极光推送,应公司需求要求使用友盟推送,为了以后是有分享都适用,,, 友盟推送文档,下载demo 感觉比极光用着要简单顺手 一切就绪后,开始发送消息测试,,,,,搞了半天没有发过来消息 原来 ...

  5. iOS通用链接(Universal Links)突然点击无效的解决方案

    接上文<微信中通过页面(H5)直接打开本地app的解决方案>已经把iOS搞定并且已经正常能跑了,突然就再也用不了了... 问题描述 测试告诉我,如果从微信打开App之后,点击App右上角的 ...

  6. RepeatMasker使用中的问题

    RepeatMasker在运行时会先产生如下一个中间文件夹如RM_23346.WedAug301137422017,最后生成结果文件,例如.out,.masked,.tbl等 软件特性:软件运行很慢, ...

  7. UTC 通用格式时间 转换为 时间戳,并格式化为2017-01-01 12:00:00

    在使用阿里云oss获取文件列表是,发现时间格式是这样的 2016-09-20T13:45:04.000Z (尼玛,是什么鬼), 经过度娘的解答,发现这就是传说中的 UTC通用格式时间 问题来了,怎么转 ...

  8. Spark源码剖析(八):stage划分原理与源码剖析

    引言 对于Spark开发人员来说,了解stage的划分算法可以让你知道自己编写的spark application被划分为几个job,每个job被划分为几个stage,每个stage包括了你的哪些代码 ...

  9. Linux下查找文件的方法

    在Linux环境下查找一个文件的方法:find 路径 -name 'filename',filename不清楚全名的话可以用*号进行匹配,如“tomcat.*”.如果不清楚路径的话可以用"/ ...

  10. HTML5新特性: 自定义属性前缀data-以及dataset的使用

    HTML5规定可以为元素添加非标准的属性,但要添加前缀 data- ,目的是为元素提供与渲染无关的信息,或者提供语义信息.这些属性可以任意添加.随便命名,只要以 data- 开头即可 添加了自定义属性 ...