Vue Router has some quirks and on of the quirks is that it is not reliable when adding external links using the vue-router library.
After struggling with many solutions, I have found that creating a simple Vue.js component like this one seems to work the best (so far):
Component Example: RedirectNotes.vue
<template>
<div class="d-flex justify-content-around" style="padding:20px" v-if="redirect()">
<div>
<h3>This Vue Component Does a Basic Redirect</h3>
</div>
</div>
</template>
<script>
export default {
methods: {
redirect() {
var url = "https://www.unix.com/usernote.php";
this.$router.push({ path: "/dashboard" });
window.open(url, "_target");
}
}
};
</script>
<style>
</style>
Naturally the entries is routes.js
are simple:
const RedirectNotes = () => import("src/pages/vB/RedirectNotes.vue");
{
path: "usernotes",
name: "User Notes",
components: { default: RedirectNotes }
},
This is not the best method, but it is the only method that works consistently in vue-router
so far.
The downside is that some browsers may block the new window and the user will need to grant permissions.