Question

我有一个摘要页面和一个详细信息子页面。所有路线都使用$keybord = app::get('keyboard') if($keyboard == mobile ){ redirect ('mobile'); }else{ redirect ('desktop'); }（v 0.7.x）使用程序化导航实现，如下所示：

vue-router

但是，当我从摘要页面路由到子页面时，我需要在新标签页中打开子页面，就像将this.$router.go({ path: "/link/to/page" })添加到_target="blank"标记一样。

有办法做到这一点吗？

Answer 1

我认为你可以这样做：

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

它对我有用。感谢。

Answer 2

现在似乎可以在较新的版本（Vue Router 3.0.1）中使用：

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

Answer 3

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

问：vue-router可以在新标签页中打开链接progammaticaly

答：没有。使用普通链接。

Answer 4

如果您定义的路线与问题中提到的路线类似（路径：'/ 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
    }
  ]
})

您可以在摘要页面中解析该网址，然后按以下步骤打开子页面：

<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

Answer 5

这对我有用-

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

我修改了@Rafael_Andrs_Cspedes_Basterio答案

Answer 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时，我们都有解决方案。例如，将google打开到新标签页

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

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

Read more here

or Here

Answer 7

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

var object = JsonConvert.DeserializeObject<DestinationObject>(json);

*飞走*

Answer 8

项目中的某个地方，通常是main.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>

Answer 9

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

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

Answer 10

这对我有用：

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

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

Answer 11

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

<a :href="$router.resolve({name: 'posts.show', params: {post: post.id}}).href" target="_blank">
    Open Post in new tab
</a>

Answer 12

//在你的组件脚本中使用这个

  this.$router.push("/merchant/backend/login",'_blank');

vue-router可以在新标签中打开一个链接吗？

12 个答案: