[英]Can vue-router open a link in a new tab?
I have a summary page and a detail subpage.我有一个摘要页面和一个详细信息子页面。 All of the routes are implemented with
vue-router
(v 0.7.x) using programmatic navigation like this:所有路由都使用
vue-router
(v 0.7.x) 使用编程导航实现,如下所示:
this.$router.go({ path: "/link/to/page" })
However, when I route from the summary page to the subpage, I need to open the subpage in a new tab just as one would by adding _target="blank"
to an <a>
tag.但是,当我从摘要页面路由到子页面时,我需要在新选项卡中打开子页面,就像将
_target="blank"
添加到<a>
标记一样。
Is there a way to do this?有没有办法做到这一点?
I think that you can do something like this:我认为你可以做这样的事情:
let routeData = this.$router.resolve({name: 'routeName', query: {data: "someData"}});
window.open(routeData.href, '_blank');
It worked for me.它对我有用。
It seems like this is now possible in newer versions (Vue Router 3.0.1):现在似乎可以在较新的版本(Vue Router 3.0.1)中实现:
<router-link :to="{ name: 'fooRoute'}" target="_blank">
Link Text
</router-link>
In case that you define your route like the one asked in the question (path: '/link/to/page'):如果您像问题中提出的那样定义您的路线(路径:'/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
}
]
})
You can resolve the URL in your summary page and open your sub page as below:您可以解析摘要页面中的 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>
Of course if you've given your route a name, you can resolve the URL by name:当然,如果您为路由命名,则可以按名称解析 URL:
routes: [
{
path: '/link/to/page',
component: MyComponent,
name: 'subPage'
}
]
...
let route = this.$router.resolve({name: 'subPage'});
References:参考资料:
Somewhere in your project, typically main.js or router.js项目中的某个地方,通常是 main.js 或 router.js
import Router from 'vue-router'
Router.prototype.open = function (routeObject) {
const {href} = this.resolve(routeObject)
window.open(href, '_blank')
}
In your component:在您的组件中:
<div @click="$router.open({name: 'User', params: {ID: 123}})">Open in new tab</div>
Just write this code in your routing file :只需在您的路由文件中编写此代码:
{
name: 'Google',
path: '/google',
beforeEnter() {
window.open("http://www.google.com",
'_blank');
}
}
This worked for me-这对我有用-
let routeData = this.$router.resolve(
{
path: '/resources/c-m-communities',
query: {'dataParameter': 'parameterValue'}
});
window.open(routeData.href, '_blank');
I modified @Rafael_Andrs_Cspedes_Basterio answer我修改了@Rafael_Andrs_Cspedes_Basterio 答案
If you are interested ONLY on relative paths like: /dashboard
, /about
etc, See other answers.如果您只对相对路径感兴趣,例如:
/dashboard
、 /about
等,请参阅其他答案。
If you want to open an absolute path like: https://www.google.com
to a new tab, you have to know that Vue Router is NOT meant to handle those.如果你想打开一个绝对路径,比如:
https://www.google.com
: https://www.google.com
到一个新标签,你必须知道 Vue Router 并不打算处理这些。
However, they seems to consider that as a feature-request.然而,他们似乎认为这是一个功能请求。 #1280 .
第1280章But until they do that,
但在他们这样做之前,
Here is a little trick you can do to handle external links with vue-router.
这里有一个小技巧,你可以用 vue-router 处理外部链接。
router.js
) and add this code: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()
}
Now, whenever we deal with absolute URLs we have a solution.
现在,每当我们处理绝对 URL 时,我们就有了一个解决方案。 For example to open google to a new tab
例如打开谷歌到一个新标签
this.$router.absUrl('https://www.google.com)
Remember that whenever we open another page to a new tab we MUST use noopener noreferrer
.请记住,每当我们打开另一个页面到新选项卡时,我们必须使用
noopener noreferrer
。
I think the best way is to simply use:我认为最好的方法是简单地使用:
window.open("yourURL", '_blank');
🚀* flies away * 🚀*飞走了*
It can be achieved by creating a separate method for window redirect like this.可以通过像这样为 window 重定向创建一个单独的方法来实现。
const openLinkInNewTab = (url) => {
window.open(url, '_blank');
}
then use it on template
like this然后像这样在
template
上使用它
<a href="javascript:void(0)" @click="openLinkInNewTab('https://devsbuddy.com')">
Open in new tab
</a>
This works for me:这对我有用:
In HTML template: <a target="_blank" :href="url" @click.stop>your_name</a>
在 HTML 模板中:
<a target="_blank" :href="url" @click.stop>your_name</a>
In mounted(): this.url = `${window.location.origin}/your_page_name`;
在mounted():
this.url = `${window.location.origin}/your_page_name`;
The simplest way of doing this using an anchor tag would be this:使用锚标记执行此操作的最简单方法是:
<a :href="$router.resolve({name: 'posts.show', params: {post: post.id}}).href" target="_blank">
Open Post in new tab
</a>
Below code is to open a new tab with parameter.下面的代码是打开一个带有参数的新选项卡。
With router link=与路由器链接=
<router-link
:to="{ name: 'task_section',query: {reportId: item.task,}}"
target="_blank"> Link Text
</router-link>
Now access to the sented data现在访问发送的数据
this.$route.query.reportId
Simply use this, it works.只需使用它,它就可以工作。
<a target="_blank" href="https://google.com">google.com</a>
impossible to use router-link.无法使用路由器链接。
//在你的组件脚本中使用这个
this.$router.push("/merchant/backend/login",'_blank');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.