Vue-router 可以在新标签中打开链接吗？

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

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

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

有办法吗？

233653 次浏览
小开

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

问: vue-router 可以在新的选项卡中以编程方式打开链接吗

不，用普通链接。

小开
最佳答案

我认为你可以这样做:

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

这招对我很管用。

小开

如果你像问题中提到的那样定义你的路线(路径:’/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 路由器3.0.1)中是可行的:

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

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

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

* fly away *

小开

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

只要在路由文件中写下这段代码:

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

这对我很管用

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

我修改了@Rafael _ Andrs _ Cspedes _ Basterio 的回答

小开

如果你只对相对路径感兴趣，如: /dashboard，/about等，请参阅其他答案。

如果你想打开一个绝对路径，如: https://www.google.com到一个新的选项卡，你必须知道 Vue 路由器不是为了处理这些。

然而，他们似乎认为这是一个功能要求,

这里有一个使用 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()
}

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

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

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

你可在此浏览更多资料

或者这里

小开

这对我有用:

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

在安装()中: this.url = `${window.location.origin}/your_page_name`;

小开

使用锚标记实现这一点的最简单方法如下:

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

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

与路由器连接 = 

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

现在访问发送的数据

this.$route.query.reportId
小开

它可以通过创建一个单独的窗口重定向方法来实现，如下所示。

const openLinkInNewTab = (url) => {
window.open(url, '_blank');
}

然后像这样在 template上使用它

<a href="javascript:void(0)" @click="openLinkInNewTab('https://devsbuddy.com')">
Open in new tab
</a>
小开

用这个就行了。

<a target="_blank" href="https://google.com">google.com</a>

不可能使用路由器连接。


提交答案