1.在router-view外嵌套keep-alive标签;
2.在组件中设置一个属性保存路由;
3.在组件actived函数中将路由push到this.$router中;
4.在beforeRouterLeave中将概述性更新。
demo:
<keep-alive exclude="Profile">
<router-view></router-view>
</keep-alive>
<template>
<div>
<h2>我是首页内容哈哈哈</h2>
<p>首页呵呵</p>
<router-link to="/home/news">新闻</router-link>
<router-link to="/home/message">消息</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name:'Home',
data(){
return {
// home页面默认路由值
path:'/home/news'
}
},
created() {
console.log('home created');
},
destroyed() {
console.log('home destroyed');
},
activated() {
this.$router.push(this.path);
},
// 这个函数执行太晚,执行时路由已经变调了,所以保存不下来
// deactivated() {
// this.$router.push(this.path);
// },
beforeRouteLeave (to, from, next) {
// 离开页面之前记住页面路由
console.log(this.$route.path);
this.path = this.$route.path;
next();
}
}
</script>
<style scoped>
</style>
keep-alive包含的组件只会创建一次,要想某个组件每次都去创建 ,可在keep-alive中加入exclude属性,加入组件名。