Vue Router 总是重新加载浏览器 - 失去 vuex-state

Question

我有一个问题，看起来很简单，但现在不是那么简单（对我来说）：

我已经使用 vue-cli（Router、VueX、PWA）建立了一个 Vue 项目。我像往常一样设置了一些路由（直接遵循文档的建议）和 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

在我的视图/组件中，我在$router 实例上使用push 方法，以编程方式死记硬背，如下所示：

this.$router.push({ name: 'home', params: { status: project.response.status, message: project.response.data.error }})

，其中project 是awaited axios HTTP 请求的结果。

我的问题

每次我以编程方式推送新路由或使用 router-view 元素时，我的页面都会重新加载（我想在 SPA / PWA 中防止...）

我的 Vue 实例：

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

如果有人能帮助我在每次使用 Vue 路由器更改路由时不要重新加载页面，我会很高兴。

Answer 1

我认为重新加载行为与您路由器的历史模式有关

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

您可以尝试删除历史模式，看看会发生什么。如果您想保留它，请检查历史模式文档以查看所有设置是否已正确完成。 https://router.vuejs.org/guide/essentials/history-mode.html。

希望这会有所帮助。

Answer 2

您可以尝试使用 vuex-persistedstate 来维护存储中的数据，因为它不会在页面刷新时更改。

`import createPersistedState from "vuex-persistedstate

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

访问https://www.npmjs.com/package/vuex-persistedstate