I encountered an issue that initially appeared simple, but has turned out to be more complex for me:
After setting up a Vue project using vue-cli with Router, VueX, and PWA functionalities, I defined some routes following the documentation recommendations and created state fields in VueX:
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/views/Home.vue'
import Login from '@/views/Login.vue'
import Logout from '@/components/functional/Logout.vue'
import Datapoints from '@/views/Datapoints.vue'
import store from '../store'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'home',
component: Home,
meta: {
requiresAuth: true
}
},
{
path: '/login',
name: 'login',
component: Login,
meta: {
requiresGuest: true
}
},
{
path: '/logout',
name: 'logout',
component: Logout
},
{
path: '/project/:id',
name: 'project',
component: Datapoints
}
]
const router = new VueRouter({
mode: 'history',
routes
})
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresAuth)) {
if (!store.getters.isAuthenticated) {
next({
path: '/login',
query: { redirect: to.fullPath }
})
} else {
next()
}
} else {
next()
}
})
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresGuest)) {
if (store.getters.isAuthenticated) {
next({
path: '/',
query: { redirect: to.fullPath }
})
} else {
next()
}
} else {
next()
}
})
export default router
Within my Views / Components, I utilize the push method on the $router instance for programmatic routing, like so:
this.$router.push({ name: 'home', params: { status: project.response.status, message: project.response.data.error }})
, where project is the result of an awaited axios HTTP request.
The Issue at Hand
Every time I programmatically push a new route or use the router-view element, my page reloads (contrary to what I want in a SPA / PWA setup...)
My Vue instance:
new Vue({
router,
store,
vuetify,
render: h => h(App)
}).$mount('#app');
I would greatly appreciate any assistance in resolving the problem of page reloading on every route change with the Vue router.