vue-router2.0组件复用

在使用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组件相当于会重新加载。

当使用动态路由时,例如从 /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都会重新渲染,生命周期会重新执行。

时间: 2024-11-14 09:26:49

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

初识vue 2.0(13):子组件使用watch监听父组件变化

子组件使用created或者mounted通常只能在组件初始化的时候,获取父组件传过来的props数据. 父组件props数据发生变化,子组件默认无法感知,因此需要手动实现子组件监听父组件变化的功能. 一般的值类型数据,可以直接使用watch监听: watch: { msg(newVal, oldVal){//对引用类型的值无效 console.info('value changed ', newVal) } } 引用类型,普通watch方法,无法监听到引用类型内部的变化. 解决此问题,可以在父

Vue.js说说组件

什么是组件:组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HTML元素的形式,以is特性扩展. 如何注册组件? 需要使用Vue.extend方法创建一个组件,然后使用Vue.component方法注册组件.Vue.extend方法格式如下: var MyComponent = Vue.extend({ // 选项...后面再介绍 }) 如果想要其他地方使用这个创

vue 2.0 开发实践总结之疑难篇

续上一篇文章:http://www.cnblogs.com/beidan/p/6129891.html ,如果没有看过的可以移步看一下. 本篇文章目录如下: 1.  vue 组件的说明和使用 2.  vuex在实际开发中的使用 3.  开发实践总结 1.  vue 组件的说明和使用 一个组件实质上是一个拥有预定义选项的一个 Vue 实例 在header组件内部允许外部使用,需要导出属性,有2种导出方法 1.  默认导出(不用命名) 1 export default { 2 data () { 3

Vue.js的组件化思想--下

Vue.js的组件化思想--下 一.组件间的通信        组件实例的作用域是孤立的:这意味着不能并且不应该在子组件的模板内直接引用父组件的数据.但是父子组件之间需要通信:父组件要给子组件传递数据,子组件需要将它内部发生的事情告知给父组件.          在 Vue.js 中,父子组件的关系可以总结为 props down, events up .父组件通过 props 向下传递数据给子组件,子组件通过 events 给父组件发送消息.如下图所示: 二. Prop - 父组件传递数据给子

vue.js之组件篇

Vue.js 组件 模块化:是从代码逻辑的角度进行划分的: 组件化:是从UI界面的角度进行划分的. 组件(Component)是 Vue.js 最强大的功能之一,组件可以扩展 HTML 元素,封装可重用的代码. 组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树,如下图所示: 使用Vue.extend来创建全局vue组件: var com1 = Vue.extend({ template: '<h3>这是使用 Vue.extend 创建的组件&

vue指令及组件

复习 """ vue: 为什么选择vue - 综合其他框架优点,轻量级,中文API,数据驱动,组件化开发,数据的双向绑定,虚拟DO 渐进式js框架 - 选择性控制 - 创建一个vue实例对象,关联一个挂载点 实例成员: el:body,html不能,通常用id,css3选择器语法 data: 数据,字典形式 filters:过滤器函数 fn(a, b) - {{ a | fn(b) }} | {{ a,b | fn }} methods: 事件方法 指令: 文本:{{ }}

vue框架 之 组件

一.介绍: 1) 组件:一个包含html.css.js独立的集合体,这样的集合体可以完成页面解构的代码复用 2) 分组分为根组件.全局组件与局部组件 根组件:所有被new Vue()产生的组件,在项目开发阶段,一个项目只会出现一个根组件 : 全局组件:不用注册,就可以成为任何一个组件的子组件 : 局部组件:必须注册,才可以成为注册该局部组件的子组件 . 3) 每一个组件都有自身的html结构,css样式,js逻辑 每一个组件其实都有自己的template,就是用来标识自己html结构的 : te

Vue1.0学习总结(4)———Vue1.0自定义组件、Vue1.0组件之间的通信

Vue自定义组件: 组件:就是一个大的对象:new Vue({})就是一个组件定义一个组件:1.全局组件: <div id="box"> <aaa></aaa> </div> var Aaa=Vue.extend({ template:'<h3>我是一个标题</h3>' }); Vue.component('aaa',Aaa); a)给自定义的组件添加数据: data必须是函数的形式,函数必须返回一个对象(json

通信vue2.0组件

vue2.0组件通信各种情况总结与实例分析 Props在vue组件中各种角色总结 在Vue中组件是实现模块化开发的主要内容,而组件的通信更是vue数据驱动的灵魂,现就四种主要情况总结如下: 使用props传递数据---组件内部 //html <div id="app1"> <i>注意命名规定:仅在html内使用my-message</i> <child my-message="组件内部数据传递"></child&