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

Posted 2023-02-22

【中文标题】Vue Router 总是重新加载浏览器 - 失去 vuex-state

【英文标题】：Vue Router always reloads browser - loosing vuex-state

【发布时间】：2020-03-10 03:15:59

【问题描述】：

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

我已经使用 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 路由器更改路由时不要重新加载页面，我会很高兴。

【问题讨论】：

不会 .push( name: 'home', params: status: project.response.status, message: project.response.data.error ) 与导致导航到 router.push( path: `/$project.response.status/$project.response.data.error`) 的结果相同

您的主路由上似乎没有任何 status 和 message 参数

@Bravo 是的，它会是相同的，但是我的页面刷新的问题仍然存在。

@LorinIonita 你是什么意思？我只是在路由路径中传递参数 - 这应该不是问题。这些值确实存在（我也检查过）。

答，好的。我看到你有project.response.status。 Axios 返回响应，所以它应该是response.status 或者如果你将响应分配给project，在你的情况下project.status

【参考方案1】：

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

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

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

希望这会有所帮助。

【参考方案2】：

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

`import createPersistedState from "vuex-persistedstate

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

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

【讨论】：

嗯，总的来说这是个好主意，但我仍然会遇到我的 vue-router 会刷新页面的问题 - 所以我传递的所有参数都会丢失。当然，这将解决丢失我的 vuex 数据的问题，但它不会解决其他问题。我能做的是使用持久状态并将我当前的所有路由参数存储在那里，但我更喜欢解决问题源而不是治愈它的症状:)