I have a non SPA (multi page application). On one page I use a vue.js component with multiple tabs. I control those tabs with VueRouter. it all works well very well actually.
I am using vue 2 and vue-router 3.
I define the Router directly in the single file component like this.
<script>
// import Vue from 'vue';
import VueRouter from 'vue-router';
export default {
name: 'ProductDisplay',
router: new VueRouter({
routes: [
{ name: 'offer', path: '/' },
{ name: 'posts', path: '/posts' },
{ name: 'reviews', path: '/reviews' }
],
}),
}
</script>
This tabbed component is imported globally because the entire multipage application is driven by a single app.js file compiled by webpack.
My problem is now, that even on pages, where this component is not used at all (only import ProductDisplay from product-display.vue is present), this new VueRouter({}) call affects the current URL by appending /#/ at the end.
e.g. loading my homepage https://www.example.com it ends up beeing https://www.example.com/#/
Just to clarify: this ProductDisplay component is NOT used on the homepage at all.
On the other hand, on the page where ProductDisplay is being used I expect the urls to be like this and it works well.
https://www.example.com/product#/
https://www.example.com/product#/posts
https://www.example.com/product#/reviews
Here is the entire JavaScript code (webpack + babel) loaded on the homepage if someone likes to analyze. https://pastebin.com/VAAvpfXA
Is there a way to avoid this behaviour, e.g. by explicitely activating/initiating a VueRouter object?