zoukankan      html  css  js  c++  java
  • vue(25)路由结合keep-alive使用缓存路由

    当我们从一个路由组件跳转到另一个路由组件的时候,默认是会先销毁前一个路由组件在新建后一个路由组件,每次都会触发组件的销毁和创建周期函数。

    每次创建和销毁组件比较消耗资源,我们可以结合keep-alive来让路由组件进行缓存,这样切换的时候路由组件不会被销毁,只会触发组件的deactivated(隐藏)和 activated(激活)两个生命周期函数。

    使用的方式是在App.vue文件中,将router-view写成keep-alive的方式:

      <router-view v-slot="{Component}">
        <transition>
          <keep-alive>
            <component :is="Component"/>
          </keep-alive>
        </transition>
      </router-view>
    上面的写法是对所有的路由组件都生效,即都使用缓存的方式。
    如果我们希望只对部分组件生效,可以为keep-alive标签附上exclude="排除组件的名称1,排除组件的名称2"属性或者include="使用缓存的组件名称1,...":
      <router-view v-slot="{Component}">
        <transition>
          <keep-alive exclude="About">
            <component :is="Component"/>
          </keep-alive>
        </transition>
      </router-view>
     
    结合keep-alive的路由组件我们还可以实现如下功能:
    比如我们有Home组件路由有About组件路由,About组件路由下有两个Article子组件路由(传入参数不同,显示各自的文章内容)。
    现在我们首先点击About路由,然后点击进入id为2的Article子路由,现在页面显示的是Article为2的文章内容。
    然后我们点击回到Home路由,然后再点击进入About路由,这时候我们希望页面还是显示的之前离开时的Article为2的文章内容,即Article为2的子路由。
    实现上述功能的思路是,首先使用keep-alive对路由进行缓存,再组件About的data中定义一个path变量再路由离开时(使用beforeRouterLeave路由钩子函数在路由离开时触发)保存当前的路由,由于使用了keep-alive所以这个变量在About组件再次被激活时不会被初始化,也就是能拿到上次离开这个路由时的path。然后在activated生命周期函数中使用this.$router.push(path);在组件激活时就自动跳到上次离开时的路由即可。
     
  • 相关阅读:
    c# 基础连接已经关闭: 连接被意外关闭,错误的解决
    关于SSIS中代码页(Code Page) 相关错误
    WinAPI: CopyFileEx
    RegularExpressions(5) RegularExpressions 成员(二) IRegex
    RegularExpressions(4) RegularExpressions 成员(一)
    RegularExpressions(3) RegularExpressions 的工作思路
    一句话复制整个文件夹(当然包括嵌套文件夹) 回复 "张哆哆" 的问题
    有趣的 TBitBtn.Kind
    如何用 GDI+ 高质量地缩放图片 回复 "程序牛" 的问题
    如何用 GDI 绘制阴影文字 回复 "Splendour" 的问题
  • 原文地址:https://www.cnblogs.com/maycpou/p/14787336.html
Copyright © 2011-2022 走看看