29.返回历史子路由

标签：his   使用   新闻   定向   router   vat   red   ima   bsp   

点击首页下的新闻子路由再点击档案，再次点击首页显示的还是新闻子路由。

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
   },

29.返回历史子路由

标签：his   使用   新闻   定向   router   vat   red   ima   bsp   

原文地址：https://www.cnblogs.com/ajaXJson/p/14964727.html