vue-router opens the page in a new window

Vue is a progressive framework for single-page application design, but sometimes a new window will open a page in the project. At this time, the knowledge of vue-router is needed to solve it.

Digital management platform
Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus
Vue permission system case
personal blog address

1. Use labels

It should be noted that router-link does not support the target="_blank" attribute, so the tag="a" attribute is required to render router-link as a tag

<router-link tag="a" target="_blank" :to="{name:'List',query:{id: 'val'}}">详情页</router-link>

2. Use programmatic navigation

Sometimes it is necessary to realize the page jump in the click event or in the function, so you can use the example method of router to realize it by writing code. We often use router.go, but after vue2.0, this method does not support the property of opening a new window.

1. Use $router.resolve This method can realize the opening of a new window, isService is an event call

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

2. Use $router.resolve with parameters to open in a new window

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

3. The receiving parameter method of the new window

created() {
    if (this.$route.params) {
      this.active = this.$route.params.id;
      this.init();
    }
  },
watch: {
    $route(to, from) {
      //监听路由是否变化
      if (to.params.id != from.params.id) {
        this.active = to.params.id;
        this.init();//重新加载数据
      }
    }
}