keep-alive在路由中的使用

  1. 路由中keep-alive的使用,也就是将router-view包含在keep-alive中,这样当频繁往复点击多个router-link时,router-link对应的组件不会被频繁的创建和销毁,因为包含在keep-alive中router-view被缓存了起来。即使浏览器刷新,由keep-alive缓存的数据仍旧处于缓存状态;
  2. 场景:页面含有“首页”和“沸点”,点击“沸点”并点击沸点对应组件下的文字“我是沸点”,文字变成红色。此时点击"首页",切换到了“首页”对应的组件,最后再点击“沸点”,这个时候“我是沸点”仍旧是红色的。说明"沸点"对应的组件不是被新创建的,仍旧是此前的已缓存的组件。
  3. 代码
<!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:`
					
我是Home
`
} let Pins = { template:`
我是Pins
`
, 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:`
首页 沸点
`
} let vm = new Vue({ el:'#app', data:function() { return { } }, router, components:{ App }, template:` ` }) </script> </body> </html>

结果:
(1)点击“沸点”并点击“我是Pins”后,文字变红。点击“首页”再点击“沸点”后,文字颜色仍旧是红色。说明keep-alive将此前组件缓存起来了
keep-alive在路由中的使用_第1张图片

你可能感兴趣的:(vue)