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

      
  • 相关阅读:
    mysql数据库如何设置默认字符集
    vue初探(构建一个axios+java项目)
    mui中几种open页面的区别
    git版本控制的文件(没有图标标明)
    JDBC连接超时,针对连接不稳定,有时候能连上(登录),一会又报连接超时
    提升group by 的效率
    enum类型与tinyint,mysql数据库tinyint数据取出0和1的方法
    word.xml加变量赋值后格式损坏(类似发表评论,脚本符号<>&)
    iOS--全局断点的设置
    23Properties(配置文件)
  • 原文地址:https://www.cnblogs.com/lmh2072005/p/7606249.html
Copyright © 2020-2023  润新知