vue实现keep-alive页面缓存【三步骤配置,一步到位】
2023-09-27 14:27:10 时间
一、博主介绍
💒首页:水香木鱼
🛫专栏:后台管理系统
✍简介: 博主:花名 “水香木鱼”,星座"水瓶座一枚"
🔰 格言: 生活是一面镜子。 你对它笑, 它就对你笑; 你对它哭, 它也对你哭。
🔋 充电:相信付出终将会得到回报!
二、笔芯文章
详细的keep-alive 配置项,请阅读如下内容👇
(1)、App.vue【增加keep-alive标签】
在app.vue 跟文件下,添加
keep-alive
标签;
此处划分:
①需要缓存
页面配置
②不需要缓存
页面配置👇
v-if="$route.meta.keepAlive"
v-if="!$route.meta.keepAlive"
<template>
<div id="app">
<!--需要缓存的keep-alive配置 展示内容-->
<keep-alive>
<router-view v-if="$route.meta.keepAlive" />
</keep-alive>
<!--不需要缓存的keep-alive 配置 展示内容-->
<router-view v-if="!$route.meta.keepAlive" />
</div>
</template>
(2)、router.js【配置keep-alive (meta属性)】
在router.js 中,需要缓存的页面路由内,配置
meta: { keepAlive: true, //需要缓存的页面 },
- keep-alive:
true
【需要缓存页面】 - keep-alive:
false
【不需要缓存页面】
//首页
{
path: "/home",
name: "home",
component: (results) =>
require([/* webpackChunkName: "home" */ "@/views/Home"], results),
//配置keep-alive 的状态
meta: {
keepAlive: true, //需要缓存的页面
},
},
(3)、详情页【添加返回上一页事件】
<template>
<div>
<el-page-header @back="goBack" :content="this.$route.query.name"> </el-page-header>
</div>
</template>
methods: {
//返回上一页
goBack() {
//
if (window.history.length <= 1) {
this.$router.push({ path: "/" });
return false;
} else {
this.$router.push({ path: "/" });
}
},
}
三、博主致谢
感谢小伙伴们,耐心的阅读完本篇文章,关注👉 水香木鱼🔔 获取更多精彩文章!
⭐⭐⭐ 做为小可爱的你,别忘记一键三连呦!
相关文章
- 【Vue】Vue-cli(脚手架)的安装与配置(一步一步图文)
- [转]Vue-Devtools安装配置教程(献给伸手党)
- Vue.js 前端项目在常见 Web 服务器上的部署配置
- vue.js-详解三大流行框架VUE_快速进阶前端大咖-Vue基础
- vue-cli3.0 多环境打包配置
- Vue--路由的基本使用(组件之间的跳转)new VueRouter---配置path和子组件---跳转路径带#<a href="#/register">---显示区域用<router-view>
- Vue知识点总结(23)——Vue-Cli3脚手架基本配置和快速原型开发(超级详细)
- vue工程化引入组件模板
- vue $ref的基本用法
- 浅析Vue3相关基础知识:Vue3应用配置、重写的v-model、emits 选项、getCurrentInstance()获取实例、采用mitt实现全局通讯、vue-router的新特性
- vue-cli4 配置gzip文件处理、nginx配置解决vue单页面打包文件大首次加载慢的问题
- 理解Vue的计算属性
- vue前台(二)在路由配置项中,配置meta属性来影藏组件
- Vue学习第31天——编程式路由导航5种方法详解及案例练习(与声明式路由导航对比)
- Vue学习第18天——Vue中的过度与动画效果的使用与案例
- 【转载】vue cli 3.0下配置开发环境下的sourcemap