vue-router 可以在新标签页中打开链接吗？答案

【问题标题】：Can vue-router open a link in a new tab?vue-router 可以在新标签页中打开链接吗？
【发布时间】：2017-02-22 05:24:57
【问题描述】：

我有一个摘要页面和一个详细信息子页面。所有路由都使用vue-router (v 0.7.x) 实现，使用如下编程导航：

this.$router.go({ path: "/link/to/page" })

但是，当我从摘要页面路由到子页面时，我需要在新选项卡中打开子页面，就像将_target="blank" 添加到<a> 标记一样。

有没有办法做到这一点？

【问题讨论】：

我认为 vue 路由器不可能，您可以提取并构建您的 url，然后使用 window.open(url, '_blank')
是的，他们官方说这是不可能的。谢谢。
下面有一个有效的答案，您应该接受它作为对您问题的回答，您不觉得吗？
我检查了所有的答案，我唯一做的就是在我的路由器链接标签中添加target="_blank" 。但我不确定这是否是好的做法。而且我没有任何参数

标签： javascript vue.js vue-router

【解决方案1】：

对于那些想知道答案是否定的人来说。在 github 上查看相关的issue。

问：vue-router 能否在新标签页中以编程方式打开链接

答：不可以。使用普通链接。

【讨论】：

谢谢，其实问题是我开的。
现在可以在 v3 stackoverflow.com/a/49654382/2678454 中将 target="_blank" 添加到 <router-link> 标记
发现这非常有用，而不是构建完整的 URL 并使用 window.open

【解决方案2】：

我认为你可以这样做：

let routeData = this.$router.resolve({name: 'routeName', query: {data: "someData"}});
window.open(routeData.href, '_blank');

它对我有用。

【讨论】：

这对我来说似乎是最好的方法。您仍然使用 $router 来构建 url，而不必将一些 hacky 字符串混合在一起，然后使用 window 打开新选项卡。 +1
这是最完整的解决方案，如果您尝试访问的路由的 url 以这种方式更改，可以让您保持检查。不错！
不幸的是，此方法被某些默认浏览器弹出窗口阻止程序阻止
这是 IMO 的最佳答案
@Rafel，我可以请你看一下与 Anthone Gore 的“全栈 Vue.js 2 和 Laravel 5”一书的 github 中的源代码相关的 Vue.JS 问题这里stackoverflow.com/questions/59245577/…？特别看看 EDIT: OP 的部分？

【解决方案3】：

如果您像问题中提出的那样定义您的路线（路径：'/link/to/page'）：

import Vue from 'vue'
import Router from 'vue-router'
import MyComponent from '@/components/MyComponent.vue';

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/link/to/page',
      component: MyComponent
    }
  ]
})

您可以在摘要页面中解析 URL 并打开子页面，如下所示：

<script>
export default {
  methods: {
    popup() {
      let route = this.$router.resolve({path: '/link/to/page'});
      // let route = this.$router.resolve('/link/to/page'); // This also works.
      window.open(route.href, '_blank');
    }
  }
};
</script>

当然，如果你给你的路由一个名字，你可以通过名字解析 URL：

routes: [
  {
    path: '/link/to/page',
    component: MyComponent,
    name: 'subPage'
  }
]

...

let route = this.$router.resolve({name: 'subPage'});

参考资料：

vue-router router.resolve(location, current?, append?)
vue-router router-link

【讨论】：

【解决方案4】：

现在似乎可以在较新的版本（Vue Router 3.0.1）中实现这一点：

<router-link :to="{ name: 'fooRoute'}" target="_blank">
  Link Text
</router-link>

【讨论】：

似乎不是你可以传递参数吗？只需打开链接本身。对吗？
@Gotts 你也可以传递参数和查询参数。执行此操作的代码如下链接文本
请注意，这是针对的，它不适用于 this.$router.push()。
在路由器链接中添加目标属性。这太棒了。如果我们需要路由声明中的逻辑，@Harish 上面的答案似乎也有效。
链接文本

【解决方案5】：

我认为最好的方法是简单地使用：

window.open("yourURL", '_blank');

?* 飞走了*

【讨论】：

距离不够

【解决方案6】：

项目中的某个位置，通常是 main.js 或 router.js

import Router from 'vue-router'

Router.prototype.open = function (routeObject) {
  const {href} = this.resolve(routeObject)
  window.open(href, '_blank')
}

在您的组件中：

<div @click="$router.open({name: 'User', params: {ID: 123}})">Open in new tab</div>

【讨论】：

不反对投票，但也许这对 Vue3 很好？因为控制台/记录 this.$router.open 为我返回 undefined
不鼓励这种方法，因为它会改变原型。你不能记录它，因为它不是规范的一部分。

【解决方案7】：

只需在你的路由文件中写下这段代码：

{
  name: 'Google',
  path: '/google',
  beforeEnter() {                    
                window.open("http://www.google.com", 
                '_blank');
            }
}

【讨论】：

【解决方案8】：

这对我有用-

let routeData = this.$router.resolve(
{
  path: '/resources/c-m-communities', 
  query: {'dataParameter': 'parameterValue'}
});
window.open(routeData.href, '_blank');

我修改了@Rafael_Andrs_Cspedes_Basterio 的答案

【讨论】：

【解决方案9】：

如果您只对相对路径感兴趣，例如：/dashboard、/about 等，请查看其他答案。

如果你想打开一个绝对路径，例如：https://www.google.com 到一个新标签，你必须知道 Vue Router 不是用来处理这些的。

但是，他们似乎认为这是一项功能要求。 #1280。但在他们这样做之前，

这是一个使用 vue-router 处理外部链接的小技巧。

进入路由器配置（可能是router.js）并添加此代码：

/* Vue Router is not meant to handle absolute urls. */
/* So whenever we want to deal with those, we can use this.$router.absUrl(url) */
Router.prototype.absUrl = function(url, newTab = true) {
  const link = document.createElement('a')
  link.href = url
  link.target = newTab ? '_blank' : ''
  if (newTab) link.rel = 'noopener noreferrer' // IMPORTANT to add this
  link.click()
}

现在，每当我们处理绝对 URL 时，我们都有一个解决方案。例如打开谷歌到一个新标签

this.$router.absUrl('https://www.google.com)

请记住，每当我们打开另一个页面到新标签页时，我们必须使用noopener noreferrer。