在使用vue-router1.x时我们知道对于路由 a/b/c  和  a/b/d ,  组件a和组件b将会复用 。具体可以参考:https://github.com/vuejs/vue-router/blob/1.0/docs/zh-cn/pipeline/README.md

在vue-router2.x 路由对组件的复用也1.x基本是一样的。

还是举例 /a/b/c  和 /a/b/d

在这2个路由进行切换时,会检测到a 和b组件是可以重用的,所以这2个组件在重用时生命周期不会再执行。

对于c和d组件由于不能重用,所以生命周期在切换时会重复执行。

假如c和d组件里面分别包含了e组件 ,那e组件会不会重用呢 ,经过测试e组件是不会重用的。因为c和d组件没有重用,生命周期重新执行了,所以e组件相当于会重新加载。

而且e组件会被打包到2个路由对应的文件(除非使用CommonsChunkPlugin把require的相同的组件提出去)

当使用动态路由时,例如从 /user/1导航到 /user/2,原来的组件实例会被复用。因为两个路由都渲染同个组件,比起销毁再创建,复用则显得更加高效。不过,这也意味着组件的生命周期钩子不会再被调用。

想对路由参数的变化作出响应的话,你可以简单地 watch(监测变化) $route 对象(注意判断是否为当前路由)。参考:https://router.vuejs.org/zh-cn/essentials/dynamic-matching.html

如果有keep-alive需要注意下,keep-alive会对当前路由组件进行缓存,比如 /a/b/c ,如果在/a对应的router-view进行keep-alive,b/c不会继承keep-alive,不会缓存会重新渲染。相当于存在keep-alive嵌套的情况下,每个keep-alive对于一个子路由,父路由的keep-alive不会继承到子路由。

比如:/a/b 和/a/c  ; 路由/a进行了keep-alive , b、c没有keep-alive,在切换这2个路由时组件b、组件c都会重新渲染,生命周期会重新执行。

  

vue-router2.0组件复用的更多相关文章

  1. Vue 2.0 组件库总结

    UI组件 element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开 ...

  2. 说一说Vue(2.0)组件的通信方式

    Vue(2.0)是组件化的开发模式,在不借助vuex框架的前提下,组件之间如何通信呢?接下来我在开发中总结了几种情况.1.父组件给子组件传值(props): 父组件给子组件传值的方式主要是用函数pro ...

  3. vue 2.0 路由切换以及组件缓存源代码重点难点分析

    摘要 关于vue 2.0源代码分析,已经有不少文档分析功能代码段比如watcher,history,vnode等,但没有一个是分析重点难点的,没有一个是分析大命题的,比如执行router.push之后 ...

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

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

  5. vue-calendar 基于 vue 2.0 开发的轻量,高性能日历组件

    vue-calendar-component 基于 vue 2.0 开发的轻量,高性能日历组件 占用内存小,性能好,样式好看,可扩展性强 原生 js 开发,没引入第三方库 Why Github 上很多 ...

  6. Vue 2.0 右键菜单组件 Vue Context Menu

    Vue 2.0 右键菜单组件 Vue Context Menu https://juejin.im/entry/5976d14751882507db6e839c

  7. WijmoJS V2019.0 Update2发布:再度增强 React 和 Vue 框架的组件功能

    前端开发工具包 WijmoJS 在2019年的第二个主要版本 V2019.0 Update2 已经发布,本次发布涵盖了React 和 Vue 框架下 WijmoJS 前端组件的功能增强,并加入更为易用 ...

  8. 使用TypeScript给Vue 3.0写一个指令实现组件拖拽

    最近在用vue3重构后台的一个功能.一个弹窗组件,弹出一个表单.然后点击提交. 早上运维突然跑过来问我,为啥弹窗挡住了下边的表格的数据,我添加的时候,都没法对照表格来看了.你必须给我解决一下. 我参考 ...

  9. vue 组件复用 - component

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

随机推荐

  1. iOS 基础笔试题

    参考:https://www.jianshu.com/p/1d3496bc5bda 1.#import 跟#include.@class有什么区别?#import<> 跟 #import& ...

  2. nginx停止后再启动出现: [error] open() "/usr/local/nginx/logs/nginx.pid" failed错误的解决方法

    为了备份数据 手动停止了服务器的nginx 结果启动时报错 nginx: [error] open() "/usr/local/nginx/logs/nginx.pid" fail ...

  3. hihoCoder #1143 : 骨牌覆盖问题·一 (斐波那契数列)

    题意:我们有一个2xN的长条形棋盘,然后用1x2的骨牌去覆盖整个棋盘.对于这个棋盘,一共有多少种不同的覆盖方法呢? 思路:这是斐波那契数列啊,f[n] = f[n-1] + f[n-2],初始时 f[ ...

  4. pta 编程题12 堆中的路径

    其它pta数据结构编程题请参见:pta 这道题考察的是最小堆. 堆是一个完全二叉树,因此可用数组表示,一个下标为 i 的结点的父节点下标为 i / 2,子结点下标为 2i 和 2i + 1. 插入元素 ...

  5. Android(java)学习笔记93:为什么局部内部类只能访问外部类中的 final型的常量

    为什么匿名内部类参数必须为final类型: 1)  从程序设计语言的理论上:局部内部类(即:定义在方法中的内部类),由于本身就是在方法内部(可出现在形式参数定义处或者方法体处),因而访问方法中的局部变 ...

  6. 【BZOJ1040】[ZJOI2008] 骑士(基环外向树DP)

    点此看题面 大致题意: 给你一片基环外向树森林,如果选定了一个点,就不能选择与其相邻的节点.求选中点的最大权值和. 树形\(DP\) 此题应该是 树形\(DP\) 的一个升级版:基环外向树\(DP\) ...

  7. Python读取图片,并保存为矩阵

    from scipy.misc import imread,imshow img = imread('D:test.bmp') print img[:,:,2].shape imshow() 注意im ...

  8. 完结篇OO总结

    目录 前言 一.第四单元两次架构设计 二.架构设计及OO方法理解的演进 三.测试理解与实践的演进 四.课程收获 五.改进建议 前言 持续了17周的OO终于走向了尾声,想想寒假的时候连类都不知道是什么, ...

  9. 安装软件出现缺少vcruntime140dll的解决方法

    转自:http://jingyan.baidu.com/article/49711c617e4000fa441b7c92.html 首先下载vc++2015,注意自己系统是32位还是64位的,下载对应 ...

  10. css3媒体查询中device-width和width的区别

    1.device-width 定义:定义输出设备的屏幕可见宽度. 不管你的网页是在safari打开还是嵌在某个webview中,device-width都只跟你的设备有关,如果是同一个设备,那么他的值 ...