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:
I read Daniel's Link and found a workaround:
{
path: '/github',
beforeEnter() {location.href = 'http://github.com'}
}
You can either:
<a href=...window.location = http:// there.
I'm late to the party, but I think my solution is more simple and elegant:
<component
:is="item.link.startsWith('http') ? 'a' : 'router-link'"
v-for="item in navigationLinks"
:key="item.link"
:to="item.link"
:href="item.link"
>
{{ item.name }}
</component>
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()
})
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>
Just put the link block inside the breadcrumb item like this:
<BreadcrumbItem>
<a href="https://github.com">
<Icon type="social-github"/>
</a>
</BreadcrumbItem>
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.
I was stuck with the same issue in Vue JS. Here are my codes. Not only does it lead to a new location but also opens a new tab.
<div id="top-socials">
<ul>
<li v-for="icon in socialIcons" :key="icon">
<img @click="socialClicked(icon)" :src="icon"
style="width:25px;height:25px;"/>
</li>
</ul>
</div>
export default {
data(){
return{
socialIcons:[facebook,instagram,tiktok,youtube]
}
},
methods:{
socialClicked(v){
if(v.includes(tiktok)){
console.log(v)
}
else if(v.includes(youtube)){
var anchor = document.createElement('a');
anchor.href = 'https://www.youtube.com/@novathewonderdog9404';
anchor.target="_blank";
anchor.click();
console.log("You Tube was clicked")
}
else if(v.includes(instagram)){
console.log("Instagram was clicked")
}
else if(v.includes(facebook)){
console.log("Facebook was clicked")
}
}
}
I guess you could do the same with BreadCrumbs
