Vue路由器总是重新加载浏览器-失去vuex状态

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

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

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

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

我的问题

每次我用程序推送一条新路线，或使用router-view元素时，我的页面都会重新加载(我想在SPA/PWA中防止的…(

我的Vue实例：

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

如果anynoe能帮助我，而不是在每次使用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