Skip to content

缓存路由组件

分类:Vue2
标签:VueWeb 前端
创建时间:2021年09月26日 10:12:35

作用

默认情况下,路由从路由组件 A 跳转到路由组件 B 时,A 会自动销毁,B 则会自动挂载。有些需求规定,由 A 跳到 B 时,不销毁 A,遇到这种需求就要使用缓存路由

用法

  1. 找到路由导航所在的组件,在 <router-view></router-view> 组件的外层包裹一个 <keep-alive></keep-alive> 标签即可。

  2. 语法

    Vue
    <keep-alive>
    		<router-view></router-view>
    </keep-alive>

include 属性

  1. <keep-alive></keep-alive> 标签的 include 属性用于筛选组件,如果不写属性值或不配置这个属性,那么 <keep-alive></keep-alive> 标签默认缓存所有显示在 <router-view></router-view> 区的组件。
Vue
<keep-alive include="Home">
		<router-view></router-view>
</keep-alive>
  1. 属性值必须是组件的名字,单个组件可以用字符串,多个组件可以用数组。

    Vue
    <keep-alive :include="['Home','About']">
    		<router-view></router-view>
    </keep-alive>

基于 MIT 许可发布