Vue 里面有個(gè)很好用的 rooter 只要我們配置好了頁面路徑可以很好的幫我們解決頁面中的跳轉(zhuǎn)問題

我們最常用的莫過于

 this.$router.push({
     path: '/PageDetail',//頁面路徑
     query:{userid:userid},//路勁傳值
                });

可以很方便的進(jìn)行頁面間的跳轉(zhuǎn)。

但我們一般不僅僅這點(diǎn)需求，我們經(jīng)常會(huì)遇到tab 切換子路由的情況，這里需要注意一點(diǎn)東西

Tab 點(diǎn)擊跳轉(zhuǎn)子路由

頁面路勁配置

{
  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:'行程費(fèi)用'},
      component: () => import('@/components/TripArrange/OfferDetail'),
    },

  ],
},

點(diǎn)擊跳轉(zhuǎn)

用 this.router.push
因?yàn)?push 是推 一個(gè)個(gè)推出 點(diǎn)微信返回鍵的就會(huì)逐個(gè)返回，與實(shí)際不符。其實(shí)是要把當(dāng)前頁面替換成點(diǎn)擊的頁面 所以用 replace

因?yàn)樵谧勇酚芍斜；睿?/p>

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

所以加載完成后只會(huì)調(diào)用一次 mounted.然而又想在每次點(diǎn)擊切換子路由的時(shí)候（即當(dāng)前頁面顯示的時(shí)候做操作）實(shí)時(shí)更改標(biāo)題或者什么其他操作這時(shí)候就要用到
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;
  }

新建窗口跳轉(zhuǎn)頁面

1 跳轉(zhuǎn) 本項(xiàng)目的網(wǎng)頁

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

2 跳轉(zhuǎn)外部鏈接

 window.open(url,'_blank’);