cpa网站建设免费推广软件

定义：keep-alive是Vue的内置组件，用于包裹动态组件，缓存组件

理解：

实现动态组件交互，同时将加载出的组件进行缓存，当再次触发该组件时，不需要重复加载，防止dom重复渲染，减少加载等待的时间，减少性能的损耗。

应用场景：动态组件

使用步骤：

分情况

情况一：加载全部组件

1.在App.vue文件中直接写入一下代码

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

2.编辑路由

正常编写即可

情况二：加载部分组件

1.明确需要加载的组件在哪个界面，那么keep-alive就需要在改页面写入

2.编写路由，需要加载的组件为父组件的子类，

3.若需要加载全部子组件，则不需要添加条件，若不加载所有子组件，则需要在路由中添加meta进行条件判断

4.父组件中根据条件进行判断使用$route.meta.keepAlive进行判断true或者false，true，该组件可以被加载，false，该组件不可以被加载

例子代码如下

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '@/views/login.vue'
import ManageView from '@/views/ManageView.vue'
import Download from "@/views/personControll/DownLoad.vue";
// import EchartPictrue from '@/views/settingList/EchartPictrue'Vue.use(VueRouter)// 处理重复路由
const originpush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location){return originpush.call(this, location).catch(err => err)
}const router = new VueRouter({routes:[{path: '/', //路径路由name: 'Login', //命名路由component : Login,},{path: '/manage', //路径路由name: 'manageView', //命名路由component: ManageView,children:[{path:'/',component: ()=> import('@/views/HomePage.vue'),meta:{keepAlive:true}},//echarts{path: '/picture', //路径路由component: ()=> import ('@/views/settingList/EchartPictrue.vue'),meta:{keepAlive:true}},{path: '/download', //路径路由name: 'Download', //命名路由component: Download,// component: ()=> import ('@/views/personControll/DownLoad.vue')meta:{keepAlive:true}},{path:'/listBook',component: ()=> import ('@/views/settingList/ListBook.vue'),meta:{keepAlive:true}}]},]
})export default router

父组件

<keep-alive><router-view v-if="$route.meta-keepAlive" />
<keep-alive />

keep-alive的属性

include：包含

exclude：不包含

例子

// 加载的界面name名为testName
<keep-alive include="testName"><router-view />
</keep-alive>// 加载的界面name名不能为testName
<keep-alive exclude="testName"><router-view />
</keep-alive>//当然keep-alive同时也可以进行动态缓存 :include   :exclude  
//注意：正则表达式需要进行动态缓存 :include

总结：控制加载组件主要有两种方法：方法1：使用meta进行控制，方法2：使用include，exclude来根据他们的name进行控制。