I have a file called components.js filled with Vue.component instances.
Then I have a main.js where I implement a router using these components to create different pages.
In index.html, I have links to the router pages.
The issue is that on the initial page load, the template is not loading properly. When I click on the Home link, nothing happens. However, if I click on About or Project, the page does a full reload (with an iframe and prompt showing again). After clicking on About or Project, everything works as expected.
I even tried manually opening example.com/#/ in a new tab, but it's the same issue.
The code in my main.js file looks like this:
const About = { template: '<div>About</div>' }
const Home = { template: `
<web-header></web-header>
` }
const Project = { template: '<div>Project</div>' }
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About },
{ path: '/projects', component: Project }
]
const router = new VueRouter({
routes: routes
})
const app = new Vue({
router
}).$mount("#app");