vue3中keep-alive及include/exclude的使用

1、首先准备前期环境，路由配置及界面配置

const addRouters: Array<RouteRecordRaw> = [{//路由path:'/',name:'home',component:() => import('@/views/home/home.vue'),children:[{path:'/',redirect:'/A'},{path:'/A',name:'A',component:() => import('@/views/A/A.vue')},{path:'/B',name:'B',component:() => import('@/views/B/B.vue')},{path:'/C',name:'C',component:() => import('@/views/C/C.vue')},{path:'/D',name:'D',component:() => import('@/views/D/D.vue')}]
}]

<template><div class="home"><div class="router-btn"><el-button type="primary" @click="routerTo('A')" size="small">路由A</el-button><el-button type="success" @click="routerTo('B')" size="small">路由B</el-button><el-button type="warning" @click="routerTo('C')" size="small">路由C</el-button><el-button type="danger" @click="routerTo('D')" size="small">路由D</el-button></div><div class="router-view"><router-view class="box"></router-view></div></div>
</template><script lang="ts">
import { defineComponent } from 'vue';
import { useRouter } from 'vue-router';export default defineComponent({name:'home',setup () {const router = useRouter();//使用路由const routerTo = (path:string) => {router.push({name:path});}return {routerTo}}
})
</script><style scoped lang='scss'>.home{display: flex;flex-flow: column;.router-btn{padding: 10px;box-sizing: border-box;}.router-view{border-top: 1px solid #d8d8d8;flex:1;}}
</style>

效果图：

2、接下来我们根据上面的前期条件，加入keep-alive，实现路由缓存

//home.vue中
<!-- 使用路由缓存 --><router-view class="box" v-slot={Component}><keep-alive><component :is="Component" /></keep-alive></router-view>
<!-- 使用路由缓存 -->

<template><div>路由B<p>{{num}}</p></div>
</template><script lang="ts">
import { defineComponent, ref } from 'vue'export default defineComponent({name:'B',setup () {const num = ref<number>(0);setInterval(() => {num.value++;},1000);return {num}}
})
</script><style scoped></style>

3、经过上面改版，现在切换路由已经有了缓存

4、使用exclude，除了组件B，其余组件缓存，include就是包含的组件需要缓存

<!-- 使用路由缓存 -->
<router-view class="box" v-slot={Component}><keep-alive :exclude="['B']"><component :is="Component" /></keep-alive>
</router-view>
<!-- 使用路由缓存 -->

vue3中keep-alive及include/exclude的使用相关推荐

vue3中keep-alive路由缓存
在vue3中我是用keep-alive的include属性不生效,然后我就在component组件下使用v-if了,配合vuex的store,将需要缓存的路由名字放在数组中如下: <templa ...
cisco中的管道符号（include begin section）
首先说一下路由器命令输出过滤的语法:任意show命令+管道符|+过滤器这里的过滤器包括以下三种: include和exclude:显示包含或者不包含特定正则表达式的行 begin:从符合特定正则表达 ...
web前端培训分享：使用Dplayer实现Vue3中的视频及弹幕播放
Dplayer是一款上手简单,功能强大的HTML5视频播放器,我们可以使用它,快速在普通HTML.Vue.React中实现视频播放的功能需求.Dplayer同时也提供了目前各大视频站都在使用的弹幕功能 ...
中input怎么接受后台传值_[vue3]如何在vue3中优雅地使用vmodel？
Vue中的数据绑定绑定数据有三种方式: 插值,也就是{{name}}的形式,以文本的形式和实例data中对应的属性进行绑定 v-bind v-model v-bind eg:v-bind:class ...
Webpack的代码分包Vue3中定义异步组件分包refs的使用
一.默认的打包过程: 默认情况下,在构建整个组件树的过程中,因为组件和组件之间是通过模块化直接依赖的,那么webpack在打包时就会将组件模块打包到一起(比如一个app.js文件中): 这个时候随着项 ...
vue3中v-model的重大更新
一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件 Vue.component('custom-input', {props: ['value'],te ...
vue3 中使用动画技术
vue3 中使用动画技术作者: jcLee95 邮箱 :291148484@163.com CSDN 主页:https://blog.csdn.net/qq_28550263?spm=1001.21 ...
Vue3中的父子、子父组件通信
Vue3中的父子.子父组件通信方式总结李俊才的CSDN博客 CSDN用户名:jcLee95 邮箱:291148484@163.com 1. 父组件 => 子组件 | 使用props 父组件(分 ...
vue3中 v-md-editor 编辑器的基本使用分享
vue3中 v-md-editor 编辑器的基本使用分享安装 (2.3.15以上) # npm npm install @kangc/v-md-editor -S # yarn yarn add @ ...
vue3中的provide/inject(提供/注入)
vue3中的provide/inject(提供注入) 在说provide/inject先说一下prop逐级穿透问题. 通常我们从父组件向子组件传递数据时,会用到props.对于只需要传递一层或二层时还 ...

vue3中keep-alive及include/exclude的使用

vue3中keep-alive及include/exclude的使用相关推荐

最新文章

热门文章