CSS VueJs vue-router 链接外部网站
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/50633001/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
VueJs vue-router linking an external website
提问by nateph
This may be simple, but I've looked over documentation and can't find anything about it. I want to have my 'github' link redirect to say, github.com. However, its just appending 'https://github.com' to my url instead of following the link. Here is a snippet:
这可能很简单，但我查看了文档并找不到任何相关信息。我想让我的“github”链接重定向到 github.com。但是，它只是将“ https://github.com”附加到我的网址，而不是按照链接进行操作。这是一个片段：
<BreadcrumbItem to='https://github.com'>
<Icon type="social-github"></Icon>
</BreadcrumbItem>
(This is using iView for custom CSS, but 'to' works in the same way as router-link).
（这是将 iView 用于自定义 CSS，但“to”的工作方式与路由器链接相同）。
What ends up happening is this:
最终发生的事情是这样的：
回答by nateph
I read Daniel's Link and found a workaround:
我阅读了 Daniel 的链接并找到了一个解决方法：
{
path: '/github',
beforeEnter() {location.href = 'http://github.com'}
}
回答by user3757628
<a :href="'//' + websiteUrl" target="_blank">
{{ url }}
</a>
回答by Aurélien Bottazini
You can either:
您可以：
- use a normal link
<a href=... - use a @click handler and change
window.location = http://there.
- 使用普通链接
<a href=... - 使用@click 处理程序并
window.location = http://在那里进行更改。
回答by Ranko
回答by Mark Carver
A more dynamic way if you need it is to just override certain methods to detect when a route should be handled in an external manner using route.meta.external:
如果需要，一种更动态的方法是仅覆盖某些方法以检测何时应使用外部方式处理路由route.meta.external：
// Override matcher to fix external links.
const match = router.matcher.match
router.matcher.match = (...args) => {
let route = match.apply(router, args)
if (!route.meta.external) {
return route
}
return Object.freeze({...route, fullPath: route.path})
}
// Override resolver to fix external links.
const resolve = router.resolve
router.resolve = (...args) => {
const resolved = resolve.apply(router, args)
if (resolved.route.meta.external) {
resolved.href = resolved.route.fullPath
}
return resolved
}
// Handle external routes.
router.beforeEach((to, from, next) => {
if (to.meta.external) {
if (to.meta.newWindow) {
window.open(to.fullPath)
}
else {
window.location.replace(to.fullPath)
}
return next(false)
}
next()
})
回答by Jamieplus
Just put the link block inside the breadcrumb item like this:
只需将链接块放在面包屑项目中，如下所示：
<BreadcrumbItem>
<a href="https://github.com">
<Icon type="social-github"/>
</a>
</BreadcrumbItem>
回答by Luke Marak
const github = { template: '<div>github</div>'}
const routes = [
{
path: '/github',
beforeEnter() {location.href = 'http://github.com'},
component: github
}
]
const router = new VueRouter({
routes
})
const app = new Vue({
router
}).$mount('#app')<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<li><router-link to="/github">github.com</router-link></li>
<router-view></router-view>
</div>
</body>