29.返回历史子路由
点击首页下的新闻子路由再点击档案,再次点击首页显示的还是新闻子路由。
1.Home.vue
data() {
return {
//1.data定义默认值
path: '/home/news',
};
},
activated() {
// 2.默认值传入touter
console.log('activated');
this.$router.push(this.path);
},
beforeRouteLeave(to, from, next) {
console.log(this.$route.path);
//3.将离开页面时的url传给path
this.path = this.$route.path;
console.log(this.$route.path)
next();
},
2.index.js子路由
需要将home页面的路由重定向删除
{
path: '/home',
component: Home, //这里的是component挂载
meta:{
title:'首页'
},
children:[
// {
// path:'',
// redirect:'news'
// },
{
path:'news',
component:HomeNews
},
{
path:'message',
component:HomeMessage
}
]
},
3.App.vue
添加keep-alive
<keep-alive>
<router-view></router-view>
</keep-alive>
4.另外的情况
使用deactivated()将改变的路由添加到path,但发现调用此方法时,页面已经到了跳转后的页面,传入path的值是
deactivated(){
console.log('deactivated');
//此方法不行,因为调用此函数时,页面已经跳转到另一个页面了,所以他push的path是另一个页面的。
console.log(this.$route.path)
this.path = this.$route.path
},