VueJs vue-router linking an external website
Cssvue.jsVuejs2Vue RouterRouterlinkCss Problem Overview
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:
<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).
What ends up happening is this:
Css Solutions
Solution 1 - Css
I read Daniel's Link and found a workaround:
{
path: '/github',
beforeEnter() {location.href = 'http://github.com'}
}
Solution 2 - Css
<a :href="'//' + websiteUrl" target="_blank">
{{ url }}
</a>
Solution 3 - Css
If you use vuetify, you can use v-list-item, v-card or v-btn.
They all have a property target which you can set to _blank e.g.:
<v-list-item href="https://google.com" target="_blank">Google</v-list-item>
Solution 4 - Css
You can either:
- use a normal link
<a href=... - use a @click handler and change
window.location = http://there.
Solution 5 - Css
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>
Solution 6 - Css
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:
// 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()
})
Solution 7 - Css
Just put the link block inside the breadcrumb item like this:
<BreadcrumbItem>
<a href="https://github.com">
<Icon type="social-github"/>
</a>
</BreadcrumbItem>
Solution 8 - Css
Just do "//" instead of http or https. This works for me in router file.
Solution 9 - Css
I would create a new route in my router config file with the route to my external link opening in a a new tab.
{
name: "Github",
beforeEnter() {
window.open('https://www.github.com/', '_blank')
},
component: MyComponent,
},
Then in my template I would create a simple button that calls a function to the new route with the external link.
<button @click="onUserClick('Github')">Github</button>
setup () {
const router = useRouter()
const onUserClick = (linkTo) => {
router.push({ name: linkTo })
}
return {onUserClick}
}
This will allow you have to multiple links to external routes very easily. IE social media pages without cluttering up your component.