Vue.js中如何从组件重定向到独立HTML页面并在新标签打开

有两种常用实现方式，根据你的使用场景选择即可：

1. 原生a标签方案（最简便，适合纯跳转场景） #

你之前的写法缺少新标签打开的属性，补充target="_blank"和安全属性即可，示例代码：

<!-- 如果你把许可协议的HTML文件放在项目public目录下，直接写根路径即可 -->
<a href="/license.html" target="_blank" rel="noopener noreferrer">许可协议</a>

注：rel="noopener noreferrer"是前端安全规范要求，防止新打开的页面恶意操作原Vue页面

2. JS触发方案（适合需要先做逻辑判断再跳转的场景） #

如果需要先完成校验、接口请求等逻辑再跳转，可以在Vue方法中调用window.open实现：

方法定义： #

export default {
  methods: {
    openLicensePage() {
      // 部署在子路径的项目可以用process.env.BASE_URL拼接路径
      window.open('/license.html', '_blank', 'noopener,noreferrer')
    }
  }
}

组件中调用： #

<button @click="openLicensePage">查看许可协议</button>

注意事项 #

• 你的独立HTML文件需要放在Vue项目的public目录下，打包时会直接复制到产物根目录，路径才能正确匹配
• 如果项目部署在域名子路径下（比如访问路径为https://xxx.com/app/），需要把路径拼接为${process.env.BASE_URL}license.html避免404

内容的提问来源于stack exchange，提问作者Arul Prasath