Vue Router 配合 keep-alive 不生效的问题及解决方案

更新时间：2024年01月15日 10:45:05 作者：劫辞

我在 app.vue 中使用了 router-view 标签,来展示 layout 和其他一级路由,然后在 layout 下的 main 区域使用了一个 router-view 来展示通过菜单栏切换的子路由,下面给大家介绍Vue Router 配合 keep-alive 不生效的问题及解决方案,感兴趣的朋友一起看看吧

问题说明

这里我写了一个非常简单的demo来复现我的问题，我的问题场景出自于一个后台管理系统，我在 app.vue 中使用了 router-view 标签，来展示 layout 和其他一级路由，然后在 layout 下的 main 区域使用了一个 router-view 来展示通过菜单栏切换的子路由
问题就出在这里了，我把 keep-alive 写在了 app.vue 下的 router-view 位置，然后子路由中需要缓存的组件，就无法实现缓存，当时让我还以为是什么bug，但是也没发现什么问题，最后看官网也是这样使用的，最后在思考一段时间后点开 router 文件，猛然惊醒，写错了位置

案例复现

demo 结构

1.首先看一下我写的简单 demo

2.效果很简单，点击切换路由，切换的这个路由是子路由，路由结果如下：

const routes = [
	{
		path: '/',
		name: 'home',
		component: () => import('@/components/HomeView.vue'),
		children: [
			{
				path: 'about',
				component: () => import('@/views/AboutView.vue')
			},
			{
				path: 'message',
				component: () => import('@/views/MessageView.vue')
			}
		]
	}
]

3.这些我就不做赘述了，都非常简单

4.app.vue 文件代码如下：

<template>
	<div>
		<router-view></router-view>
	</div>
</template>
<script>
export default {}
</script>
<style scoped></style>

5.看了这个之后，在展示一下一级路由 HomeView，如下：

<template>
	<div class="home-container">
		<div class="header">
			<div class="tabs">
				<span
					class="tab"
					v-for="item in tabList"
					:key="item.path">
					<router-link :to="item.path">{{ item.name }}</router-link>
				</span>
			</div>
		</div>
		<div class="main">
            <!-- 展示子路由的路由视图 -->
			<router-view></router-view>
		</div>
	</div>
</template>
<script>
export default {
	data() {
		return {
			tabList: [
				{ name: '关于', path: '/about' },
				{ name: '留言', path: '/message' }
			]
		}
	}
}
</script>
<style lang="less" scoped>
.home-container {
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: column;
	.header {
		height: 70px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-bottom: 1px solid #666;
		.tab {
			margin-right: 20px;
			font-size: 20px;
		}
	}
	.main {
		flex: 1;
		width: 100%;
	}
}
</style>

6.其余两个页面和本次问题关系不大，而且都很简单就不展示了

问题复现和解决

1.现在我打需求是在切换页面的时候，可以让留言页面输入的内容进行缓存

2.我们在 app.vue 下是使用 keep-alive，看看效果

<template>
	<div>
		<!-- MessageVue 是留言组件的 name 属性 -->
		<keep-alive :include="['MessageVue']">
			<router-view></router-view>
		</keep-alive>
	</div>
</template>

3.效果如图：

4.现在是无法生效的，然后我们放在 HomeView 的路由出口上，如下：

<template>
	<div class="home-container">
		<div class="header">
			<div class="tabs">
				<span
					class="tab"
					v-for="item in tabList"
					:key="item.path">
					<router-link :to="item.path">{{ item.name }}</router-link>
				</span>
			</div>
		</div>
		<div class="main">
			<keep-alive :include="['MessageVue']">
				<router-view></router-view>
			</keep-alive>
		</div>
	</div>
</template>

5.现在在看一下效果，如图：

6.解决还是非常简单的，谨以此文记录我这次马虎的错误

到此这篇关于Vue Router 配合 keep-alive 不生效的问题的文章就介绍到这了,更多相关Vue Router keep-alive 不生效内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue 使用post/get 下载导出文件操作
这篇文章主要介绍了vue 使用post/get 下载导出文件操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-08-08
vue.js2.0 实现better-scroll的滚动效果实例详解
better-scroll 是一个移动端滚动的解决方案，它是基于 iscroll 的重写。better-scroll 也很强大，不仅可以做普通的滚动列表，还可以做轮播图、picker 等等，下面通过本文给大家介绍vue.js2.0 实现better-scroll的滚动效果，感兴趣的朋友一起看看吧
2018-08-08
部署vue+Springboot前后端分离项目的步骤实现
这篇文章主要介绍了部署vue+Springboot前后端分离项目的步骤实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-05-05
Vue.js函数式组件的全面了解
函数式组件就是函数是组件,组件是函数,它的特征是没有内部状态、没有生命周期钩子函数、没有this（不需要实例化的组件）,这篇文章主要给大家介绍了关于Vue.js函数式组件的相关资料,需要的朋友可以参考下
2021-10-10
图文介绍Vue父组件向子组件传值
本文通过实例代码给大家详细分享了Vue父组件向子组件传值的过程以及关键点讲解，一起学习参考下吧。
2018-02-02
vue.js实现简单的计算器功能
这篇文章主要为大家详细介绍了vue.js实现简单的计算器功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-02-02
Tree 组件搜索过滤功能实现干货
这篇文章主要为大家介绍了 Tree组件搜索过滤功能实现干货详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-07-07
vue-form表单验证是否为空值的实例详解
今天小编就为大家分享一篇vue-form表单验证是否为空值的实例详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-10-10
在vue中使用防抖和节流,防止重复点击或重复上拉加载实例
今天小编就为大家分享一篇在vue中使用防抖和节流,防止重复点击或重复上拉加载实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-11-11
详解vue-cli中的ESlint配置文件eslintrc.js
本篇文章主要介绍了vue-cli中的ESlint配置文件eslintrc.js详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09