vue-router 跳转开启新的标签页面

需求

在 Vue 项目里，使用 router-link 组件跳转页面时，需要单开一个新页面，有几种方式

分析

1. target=“_blank”

在 Vue 项目里，使用 router-link 组件跳转页面时，若要单开一个新页面，可借助 target=“_blank” 属性达成此目的。下面为你详细介绍不同的实现方式。

1. 基本用法
   若使用的是普通的字符串路径跳转，只需在 router-link 标签里添加 target=“_blank” 属性即可。

<template>
  <div>
    <!-- 使用 to 属性指定跳转路径，并添加 target="_blank" -->
    <router-link to="/new-page" target="_blank">打开新页面</router-link>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

2. 使用对象形式的 to 属性
   当使用对象形式的 to 属性来指定跳转路径时，同样可以添加 target=“_blank” 属性。

<template>
  <div>
    <!-- 使用对象形式的 to 属性指定跳转路径，并添加 target="_blank" -->
    <router-link :to="{ name: 'newPage', params: { id: 1 } }" target="_blank">打开新页面</router-link>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

3. 注意事项
   兼容性问题：target=“_blank” 在大多数现代浏览器中都能正常工作，但在某些旧版本浏览器或者特定的安全环境下可能会存在兼容性问题。
   安全风险：直接使用 target=“_blank” 会存在一定的安全风险，因为新打开的页面可以通过 window.opener 访问原页面的一些信息。为了避免这种风险，建议同时添加 rel=“noopener noreferrer” 属性。

<template>
  <div>
    <!-- 添加 rel="noopener noreferrer" 避免安全风险 -->
    <router-link to="/new-page" target="_blank" rel="noopener noreferrer">打开新页面</router-link>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

4. 动态生成 router-link
   如果你需要动态生成 router-link，可以使用 v-bind 指令绑定 to、target 和 rel 属性。

<template>
  <div>
    <!-- 动态生成 router-link -->
    <router-link :to="linkTo" :target="linkTarget" :rel="linkRel">打开新页面</router-link>
  </div>
</template>

<script>
export default {
  data() {
    return {
      linkTo: '/new-page',
      linkTarget: '_blank',
      linkRel: 'noopener noreferrer'
    };
  }
}
</script>

通过上述方法，你可以在 router-link 中实现单开一个新页面的功能，同时注意安全风险的防范

2. window.open

const switchBackend = () => {
  window.open(`${window.location.origin}/new-page`);
};