Vue 中 rooter的一些用法

Vue 里面有个很好用的 rooter 只要我们配置好了页面路径可以很好的帮我们解决页面中的跳转问题

我们最常用的莫过于

 this.$router.push({
     path: '/PageDetail',//页面路径
     query:{userid:userid},//路劲传值
                });

可以很方便的进行页面间的跳转。

但我们一般不仅仅这点需求，我们经常会遇到tab 切换子路由的情况，这里需要注意一点东西

Tab 点击跳转子路由

页面路劲配置

{
  path: '/allexplain/HomeContainerPage',
  name: 'HomeContainerPage',
  // meta: {keepAlive: true},
  component: () => import('@/components/TripArrange/HomeContainerPage'),
  // redirect: 'HomeContainerPage/test0',
  children: [
    { path: "/TripSurvey",
      meta: {keepAlive: true,title:'行程概况'},
      component: () => import('@/components/TripArrange/TripSurvey')
    },
    { path: "/TripArrangeNew",
      meta: {keepAlive: true,title:'行程详情'},
      component: () => import('@/components/TripArrange/TripArrangeNew')
    },
    { path: "/triphotelpage",
      meta: {keepAlive: true,title:'行程酒店'},
      component: () => import('@/components/TripArrange/TripHotelPage')
    },
    { path: "/test3",
      meta: {keepAlive: true},
      component: () => import('@/components/TripArrange/Test3')
    },
    {
      path: '/OfferDetail',
      meta: {keepAlive: true,title:'行程费用'},
      component: () => import('@/components/TripArrange/OfferDetail'),
    },

  ],
},

点击跳转

用 this.router.push
因为 push 是推 一个个推出 点微信返回键的就会逐个返回，与实际不符。其实是要把当前页面替换成点击的页面 所以用 replace

因为在子路由中保活，

<keep-alive>
<router-view></router-view>
</keep-alive>

所以加载完成后只会调用一次 mounted.然而又想在每次点击切换子路由的时候（即当前页面显示的时候做操作）实时更改标题或者什么其他操作这时候就要用到
activated(){
// 在这里操作
}

onTabClick(index) {
  this.mTabPosition = index
  switch (index) {
    case 0:
      this.$router.replace({
        path: '/TripSurvey',
      })
      break;
    case 1:
      this.$router.replace({
        path: '/TripArrangeNew',
      })
      break;
    case 2:
      this.$router.replace({
        path: '/triphotelpage',
      })
      break;
    case 3:
      this.$router.replace({
        path: '/OfferDetail',
      })
      break;
  }

新建窗口跳转页面

1 跳转 本项目的网页

  let route = this.$router.resolve({
    path:'/EditView',
    query:{},
});
window.open(route.href,'_blank');

2 跳转外部链接

 window.open(url,'_blank’);