bilibili学习之keep-alive


    

keep-alive有两个重要的属性:
 include-字符串或正则表达式,只有匹配的组件会被缓存 
    exclude-字符串或正则表达式,任何匹配的组件都不会被缓存 

在app.vue中

bilibili学习之keep-alive_第1张图片

 在home.vue中

	//activated()和deactivated()这两个函数,只有该组件被保持了状态使用了keep-alive时才是有效的
		activated(){
			this.$router.push(this.path)
		},
		beforeRouteLeave(to,from,next){
			//导航离开该组件的对应路由时调用
			//可以访问组件实例'this'
			console.log(this.$route.path)
			this.path = this.$route.path;
			next()
		}

实现跳转页面之后,再次返回该页面时能保留之前的访问信息

你可能感兴趣的:(Vue)