VueJs vue-router linking an external website

css vue.js vuejs2 vue-router routerlink
nateph picture nateph · May 31, 2018 · Viewed 44.9k times · Source

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: enter image description here

Answer

nateph picture nateph · May 31, 2018

I read Daniel's Link and found a workaround:

{
     path: '/github',
     beforeEnter() {location.href = 'http://github.com'}
}

Related questions

vue-router : how to remove underline from router-link

This results in an underlined link: <li><router-link to="/hello">Hello</router-link></li> My understanding is that the router-link element generates an a tag. I've tried these things in the CSS: router-link{ …

Read More
In vue.js component, how to use props in css?

I'm new to vue.js. Here is my problem: In a *.vue file like this: <template> <div id="a"> </div> </template> <script> export default { name: 'SquareButton', props: ['color'] } </script&…

Read More
How to change style of background color using Vue.js only

import Vue from 'vue' import App from './App' import BootstrapVue from 'bootstrap-vue' import 'bootstrap/dist/css/bootstrap.css' import 'bootstrap-vue/dist/bootstrap-vue.css' Vue.config.productionTip = false Vue.use(BootstrapVue); /* eslint-disable no-new */ new Vue({ el: '#app', components: { App }, …

Read More