vue页面是否缓存的两种方式
2023-09-11 14:17:23 时间
第一种
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
配合路由
//在router文件加上meta判断
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
{//home会被缓存
path:"/home",
component:home,
meta:{keepAlive: true}
}
{//hello不会被缓存
path:"/hello",
component:hello,
meta:{keepAlive: false}
}
})
第二种
// 组件
export default {
name: 'test-keep-alive',
data () {
return {
includedComponents: "test-keep-alive"
}
}
}
<keep-alive include="test-keep-alive">
<!-- 将缓存name为test-keep-alive的组件 -->
<component></component>
</keep-alive>
<keep-alive exclude="test-keep-alive"> <!-- 将不缓存name为test-keep-alive的组件 --> <component></component> </keep-alive>
相关文章
- Vue笔记:安装配置node.js及使用vue-cli创建项目
- vue项目如何实现返回上一页
- [Vue @Component] Simplify Vue Components with vue-class-component
- [Vue-rx] Access Events from Vue.js Templates as RxJS Streams with domStreams
- [Vue] Get up and running with vue-router
- [Vue] Build Vue.js Apps with the Vue-CLI and Nuxt.js
- vue.js3:分割图片为四宫格九宫格等形式(vue@3.2.37)
- vue.js3: js下载图片的两种方式:url和canvas(vue@3.2.37)
- vue.js3:用exif-js读取图片的exif信息(vue@3.2.36)
- 在Vue项目中使用vw实现移动端适配
- EasyDSS高性能流媒体服务器前端重构(五)- webpack + vue-router 开发单页面前端实现按需加载
- [Nuxt] Setup a "Hello World" Server-Rendered Vue.js Application with the Vue-CLI and Nuxt
- [Vue] Get up and running with vue-router
- vue.js3: 用jszip打包压缩图片文件(vue@3.2.37 / jszip@3.10.0 / file-saver@2.0.5)
- Vue入门教程:node安装vue命令行工具及启动项目
- 【视频】vue 插值表达式之三元运算符的使用
- vue或uniapp中文本框输入数字固定几位小数或只能输入整数的方法
- Vue CLI 4.x安装成功,但是无法运行vue-V等指令。报错vue -V 不是内部或外部命令,也不是可运行的程序或批处理文件解决方案!!!
- vue:export default 和 export 区别(difference between Vue 'export default' and 'new Vue')
- vue-seamless-scroll 好用的无缝滚动插件
- vue3 报错解决:找不到模块‘xxx.vue’或其相应的类型声明。(Vue 3 can not find module)
- 一分钟理清Vue-cli 代码构建步骤。
- element实现vue级联多选
- Vue中data元素之间相互赋值的陷阱
- 095:vue+openlayers 地图上添加网格线 (示例代码)
- Vue forms
- Vue(一)vue 概述与用法、MVVM、绑定语法、vue 指令
- 基于Java+SpringBoot+SpringCloud+Vue前后端分离医院管理系统设计与实现
- vue-ant design示例大全——按钮本地css/js资源