Vue Router always reloads browser - loosing vuex-state

2
votes

I have a problem, which seemed to be simple but now is not so simple (for me):

I have set up a Vue project with the vue-cli (Router, VueX, PWA). I have set up some routes as always (following straight the recommendations of the documentation) and some 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

In my Views / Components, i use the push method on the $router instance, to rote programatically, like this: 

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.

My Problem

Every time i push programatically a new route, or use the router-view element, my page reloads (what i want to prevent in a SPA / PWA ...)

My Vue instance:

new Vue({
    router,
    store,
    vuetify,
    render: h => h(App)
  }).$mount('#app');

I would be happy if anynoe could help me out to not reload the page on every route change with the Vue router.

2
javascriptvue.jsroutingvuexvue-router
wouldn't .push({ name: 'home', params: { status: project.response.status, message: project.response.data.error }}) be identical to result in navigation to router.push({ path: `/${project.response.status}/${project.response.data.error}`) – Bravo
You don't seem to have any status and message params on your home route – Lorin Ionita
@Bravo yes, it will be identical, but the problem, that my page refreshes, still remains. – waldemar_enns
@LorinIonita what do you mean? I am just passing paramters in the route-path - that shouldn't be a problem. The values do exists (i have checke it too). – waldemar_enns
A, ok. I see that you have project.response.status. Axios returns the response, so it should be response.status or if you assign the response to project, project.status in your case – Lorin Ionita

2 Answers

2
votes

I think the reload behavior is related to the history mode of your router

const router = new VueRouter({
  mode: 'history',
  routes
})

You can try remove the history mode and see what happens. If you want to keep it, please check with the history mode doc to see if all settings have been done correctly. https://router.vuejs.org/guide/essentials/history-mode.html.

Hope this helps.

1
votes

you can try using vuex-persistedstate to maintain data in store an it won't change whenever the page is refreshed. 

`import createPersistedState from "vuex-persistedstate

const store = new Vuex.Store({ // ... plugins: [createPersistedState()] });

Visit https://www.npmjs.com/package/vuex-persistedstate