I have encountered an issue while using vue-router in history mode. When I am on the child route "/dashboard" and refresh the page, the <ccp/> component seems to be mounted twice. The ccp component has console logging in both the created and mounted hooks, resulting in the console output appearing twice for each hook. Any ideas or suggestions would be greatly appreciated. Thank you in advance!
Edit: Upon initial app load, the <ccp/> is created and mounted only once.
Below is the code snippet:
App.vue:
<template>
<div v-show="isConnected">
<ccp/>
<router-view/>
</div>
</template>
<script>
// blah blah blah - doing stuff and then pushing route to /dashboard
return this.$router.push({name: "dashboard"});
</script>
router.js
export default new Router({
mode: "history",
routes: [
// DEFAULT ROUTE
{
path: "/",
name: "root",
alias: store.getters.isDemoMode ? "/demo" : "/app" // isDemoMode is false for this test however I wanted to show the alias config in case that is part of the problem.
},
{
path: "/demo",
name: "demo",
component: Demo
},
{
path: "/app",
name: "app",
component: App,
children: [
{
path: "/dashboard",
name: "dashboard",
component: Dashboard
}
]
}
})