vue的是單頁(yè)面應(yīng)用設(shè)計(jì)的漸進(jìn)式框架,但是有時(shí)在項(xiàng)目中也會(huì)出現(xiàn)新窗口打開(kāi)頁(yè)面的情況,此時(shí),就需要vue-router的知識(shí)來(lái)解決

一.使用<router-link>標(biāo)簽

需要注意的是,router-link并不支持 target="_blank" 屬性,所以需要tag="a"屬性把router-link渲染成<a>標(biāo)簽

<router-link tag="a" target="_blank" :to="{name:'List',query:{id: 'val'}}">詳情頁(yè)</router-link>

二.使用編程式導(dǎo)航

有些時(shí)候需要在單擊事件或者在函數(shù)中實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)，那么可以借助router的示例方法，通過(guò)編寫(xiě)代碼實(shí)現(xiàn)。我們常用的是router.go,但是vue2.0以后，這種方式就不支持新窗口打開(kāi)的屬性了,

1.使用 $router.resolve 這種方法能夠?qū)崿F(xiàn)新窗口打開(kāi), isService是事件調(diào)用

isService(val) {
  const params = { id: val };
  let routeData = this.$router.resolve({
     name: "List",
     query: params,
  });
  window.open(routeData.href, '_blank');
}

2.使用 $router.resolve帶參數(shù)在新窗口打開(kāi)

isService(val) {
      const params = { id: val };
      let routeData = this.$router.resolve({
        path: `/details/${val}`,
        query: params
      });
      window.open(routeData.location.path, "_blank");
    }

新窗口的接收參數(shù)方法

created() {
    if (this.$route.params) {
      this.active = this.$route.params.id;
      this.init();
    }
  },
  watch: {
    $route(to, from) {
      //監(jiān)聽(tīng)路由是否變化
      if (to.params.id != from.params.id) {
        this.active = to.params.id;
        this.init();//重新加載數(shù)據(jù)
      }
    }
  },