vue keep-alive保存路由状态1 (接下篇)

Posted wangmaoling

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue keep-alive保存路由状态1 (接下篇)相关的知识,希望对你有一定的参考价值。

本文很长,但是很详细,请耐心看完就一目了然了有下篇

keep-alive 是 Vue 内置的一个组件,使被包含的组件保留状态,或避免重新渲染。

1. 基础用法,缓存所有路由:

<keep-alive>
  <router-view>
    <!-- 这里是会被缓存所有的视图组件 -->
  </router-view>
</keep-alive>

如果想要单一缓存一个怎么办呢?看下面

 

2. 初级用法,缓存指定路由:

    vue 2.1.0后提供了include/exclude两个属性: 下图为官方用法:

      include - 字符串或正则表达,只有匹配的组件会被缓存

      exclude - 字符串或正则表达式,任何匹配的组件都不会被缓存

     技术分享图片

// 组件 a
export default {
  name: ‘a‘,//先定义好组件名字 才能被缓存
  data () {
    return {}
  }
}
<keep-alive include="a,b">
  <router-view>
    <!-- name 为 a以及b 的组件将被缓存! -->
  </router-view>
</keep-alive>
<keep-alive exclude="a"> <router-view> <!-- 除了 name 为 a 的组件都将被缓存! --> </router-view> </keep-alive>

 

3. 进阶用法,结合vue-router 缓存指定路由:这里包含两个用法方式,也可以一块用,看个人习惯了,我偏向用 路由meta控制

方式1:路由表meta + 公共main组件判断

//修改1.在路由表js  增加 router.meta 属性
// routes 配置
export default [
  {
    path: ‘/home‘,
    name: ‘home‘,
    component: Home,
    meta: {
      keepAlive: true // 需要被缓存
    }
  }, {
    path: ‘/edit,
    name: ‘edit‘,
    component: Edit,
    meta: {
      keepAlive: false // 不需要被缓存
    }
  }
]
//修改2.在公共main组件修改 下面是组件里的代码
<keep-alive> <router-view v-if="$route.meta.keepAlive"> <!-- 这里加载会被缓存的视图组件,比如 Home! --> </router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"> <!-- 这里加载不被缓存的视图组件,比如 Edit! --> </router-view>
//修改3.在

方式2:路由表meta + 组件内设置name属性

//修改1.在路由表js  增加 router.meta 属性
    // routes 配置
    export default [
    {
        path: ‘/home‘,
        name: ‘home‘,
        component: Home,
        meta: {
        keepAlive: true // 需要被缓存
        }
    }, {
        path: /edit,
        name: ‘edit‘,
        component: Edit,
        meta: {
        keepAlive: false // 不需要被缓存
        }
    }
    ]
//修改2.在要缓存的组件 设置那么属性
  // 组件 a
  export default {
  name: ‘home‘,//先定义好组件名字 才能被缓存
    data () {
      return {}
    }
  }

4.高级用法,指定从什么组件进入才缓存,以及销毁缓存:先介绍我发现的网上一些博主写的有bug的方法,在介绍自己的方法。

 

因本文太长请看下篇高级用法

 







以上是关于vue keep-alive保存路由状态1 (接下篇)的主要内容,如果未能解决你的问题,请参考以下文章

vue keep-alive讲解

vue keep-alive讲解

vue中动态路由组件缓存及生命周期函数

Vue Keep-Alive - 组件应用程序标头在路由更改期间不会保持活动状态

vue中keep-alive的作用

7.Vue_____keep-alive(结合路由)