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

而且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都会重新渲染,生命周期会重新执行。

 

 

  
posted @ 2017-09-28 13:11  lmh2072005  阅读(457)  评论(0编辑  收藏  举报