147

我有一个摘要页面和一个详细信息子页面。所有路线都是使用vue-router（v 0.7.x）使用​​编程导航实现的，如下所示：

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

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

有没有办法做到这一点？

4

12 回答 12

269

我认为你可以做这样的事情：

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

它对我有用。

于 2017-12-18T19:04:45.433 回答
181

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

<router-link :to="{ name: 'fooRoute'}" target="_blank">
  Link Text
</router-link>
于 2018-04-04T15:02:21.297 回答
24

对于那些想知道答案是否定的人来说。请参阅github 上的相关问题。

问：vue-router 能否以编程方式在新选项卡中打开链接

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

于 2016-10-13T22:59:16.843 回答
17

如果您像问题中提出的那样定义您的路线（路径：'/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'});

参考：

于 2018-03-22T15:39:22.467 回答
13

项目中的某个地方，通常是 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>
于 2019-03-19T09:22:48.493 回答
9

只需在您的路由文件中编写此代码：

{
  name: 'Google',
  path: '/google',
  beforeEnter() {                    
                window.open("http://www.google.com", 
                '_blank');
            }
}
于 2019-08-07T08:56:36.843 回答
9

这对我有用-

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

我修改了@Rafael_Andrs_Cspedes_Basterio 答案

于 2020-02-19T06:35:43.377 回答
6

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

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

* 飞走了 *

于 2018-11-27T07:28:11.577 回答
6

如果您只对相对路径感兴趣，例如：/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.

在这里阅读更多

或在这里

于 2020-03-24T10:29:35.623 回答
0

使用锚标记执行此操作的最简单方法是：

<a :href="$router.resolve({name: 'posts.show', params: {post: post.id}}).href" target="_blank">
    Open Post in new tab
</a>
于 2020-09-30T14:57:38.107 回答
0

这对我有用：

在 HTML 模板中： <a target="_blank" :href="url" @click.stop>your_name</a>

在挂载（）中： this.url = `${window.location.origin}/your_page_name`;

于 2020-07-20T13:27:08.040 回答
0

下面的代码是用参数打开一个新选项卡。

带路由器链接=

<router-link
                  :to="{ name: 'task_section',query: {reportId: item.task,}}"
                  target="_blank"> Link Text
              </router-link>

现在访问发送的数据

this.$route.query.reportId
于 2021-12-20T07:41:38.097 回答