当前位置: 首页 > 知识库问答 >
问题:

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

秋兴思
2023-03-14

我有一个问题,看起来很简单,但现在不那么简单了(对我来说):

我已使用Vue cli(路由器、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是等待的axios HTTP请求的结果。

每次我以编程方式推送一个新路由,或者使用router-view元素,我的页面都会重新加载(我想在SPA/PWA中阻止什么...)

我的Vue实例:

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

如果anynoe能帮我在Vue路由器的每一次路由更改中不重新加载页面,我会很高兴。


共有2个答案

傅皓君
2023-03-14

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

`import createPersistedState from "vuex-persistedstate

const store=new Vuex。存储({/…插件:[createPersistedState()]})

参观https://www.npmjs.com/package/vuex-persistedstate

崔涵亮
2023-03-14

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

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

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

希望这能有所帮助。

 类似资料:
  • 我使用的是角度2.0.0-阿尔法.30版本。当重定向到其他路由时,刷新浏览器,其显示无法获取/路由。 你能帮我弄清楚为什么会发生这个错误吗?

  • 我有几个路线,每个路线装载3个组件。所有管线上的两个组件都相同。当我在这些路由之间移动时,我希望传递新数据,在组件的某个初始化事件上,我希望填充该组件的数据,以便它反映在UI上。我还想重新触发正在加载的组件的引导动画。我该怎么做呢。因为现在,我不知道在组件的生命周期中,我将在哪里获取数据,并使用这些新数据重新提交组件。具体来说,在myapps/1和/newapp/I中有一个主视图组件和一个侧栏组件

  • 我在这个拉请求中看到: > 重新加载当前路径并再次调用数据钩子 但是当我尝试从Vue组件发出以下命令时: 我得到这个错误: 我搜索了文档,但没有找到任何相关的内容。vue/vue路由器是否提供类似的功能? 我感兴趣的软件版本有: 另外,我知道是备选方案之一,但我正在寻找本机Vue选项。

  • 我有以下Vuex商店(main.js): 我还为Vue路由器(routes.js)定义了以下路由: 我试图这样做,如果Vuex存储了对象,并且将属性设置为,则路由器会将用户重定向到登录页面。 我有这个: 问题是,我不知道如何从函数内部访问Vuex商店的对象。 我知道我可以在组件中使用来设置路由器保护逻辑,但这会使每个组件变得杂乱无章。我想在路由器级别集中定义它。

  • 我有一个关于Vuejs和Vue路由器的项目。当用户登录系统时,服务器返回一个带有令牌、用户名和名字的Json文件,该文件存储在localstorage中,以便在以下请求中使用。第一个名称在布局中用于在导航栏中显示欢迎消息。注销后,localstorage被清除,问题就在这里,当其他用户在消息welcome not reload中使用新的名字付费时。

  • 有没有可能--在中也这样做? 我为什么需要这个?让我用一个例子来解释: 创建新类别的路由是,在保存时显示,并且要将路由(23-是新项的id存储在数据库中)