VueJs vue-router linking an external website
Solution 1:
I read Daniel's Link and found a workaround:
{
path: '/github',
beforeEnter() {location.href = 'http://github.com'}
}
Solution 2:
<a :href="'//' + websiteUrl" target="_blank">
{{ url }}
</a>
Solution 3:
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:
You can either:
- use a normal link
<a href=... - use a @click handler and change
window.location = http://there.
Solution 5:
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>