vue-router2.0组件复用

Posted 2020-10-08 lmh2072005

在使用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都会重新渲染，生命周期会重新执行。