keep-alive在路由中的使用

最新推荐文章于 2023-02-13 23:32:21 发布

张小囧！冲呀！

最新推荐文章于 2023-02-13 23:32:21 发布

阅读量1.1k

点赞数 1

分类专栏： vue 文章标签： html5 vue vue.js

本文链接：https://blog.csdn.net/zhangxiaojiong_zh/article/details/106459070

版权

vue 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

路由中keep-alive的使用，也就是将router-view包含在keep-alive中，这样当频繁往复点击多个router-link时,router-link对应的组件不会被频繁的创建和销毁,因为包含在keep-alive中router-view被缓存了起来。即使浏览器刷新，由keep-alive缓存的数据仍旧处于缓存状态；
场景：页面含有“首页”和“沸点”，点击“沸点”并点击沸点对应组件下的文字“我是沸点”，文字变成红色。此时点击"首页"，切换到了“首页”对应的组件，最后再点击“沸点”，这个时候“我是沸点”仍旧是红色的。说明"沸点"对应的组件不是被新创建的，仍旧是此前的已缓存的组件。
代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset='utf-8'>
		<title>路由中keep-alive的使用</title>
	</head>
	<body>
		<div id='app'></div>
		<script type='text/javascript' src='node_modules/vue/dist/vue.js'></script>
		<script type='text/javascript' src='node_modules/vue-router/dist/vue-router.js'></script>
		<script type='text/javascript'>
			let Home  = {
				template:`
					<div>
						我是Home
					</div>
				`
			}

			let Pins  = {
				template:`
					<div class='pins' @click='clickHandler'>
						我是Pins
					</div>
				`,
				methods:{
					clickHandler:function(e) {
						e.target.style.color = "red"
					}
				}
			}

			let router = new VueRouter({
				routes:[
					{
						name:'home',
						path:'/home',
						component:Home
					},
					{
						name:'pins',
						path:'/pins',
						component:Pins
					}
				]
			})

			let App = {
				template:`
					<div>
						<router-link :to='{name:"home"}'>首页</router-link>
						<router-link :to='{name:"pins"}'>沸点</router-link>
						<keep-alive>
							<router-view></router-view>
						</keep-alive>
					</div>
				`
			}

			let vm = new Vue({
				el:'#app',
				data:function() {
					return {

					}
				},
				router,
				components:{
					App
				},
				template:`
					<App/>
				`
			})
		</script>
	</body>
</html>

结果：
（1）点击“沸点”并点击“我是Pins”后，文字变红。点击“首页”再点击“沸点”后，文字颜色仍旧是红色。说明keep-alive将此前组件缓存起来了
在这里插入图片描述

张小囧！冲呀！

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
keep-alive在路由中的使用

路由中keep-alive的使用，也就是将router-view包含在keep-alive中，这样当频繁往复点击多个router-link时,router-link对应的组件不会被频繁的创建和销毁,因为包含在keep-alive中router-view被缓存了起来。即使浏览器刷新，由keep-alive缓存的数据仍旧处于缓存状态；...
复制链接

扫一扫