Vue Router가 항상 브라우저를 새로고침 - vuex-state 손실

Vue Router가 항상 브라우저를 새로고침 - vuex-state 손실

간단한 것처럼 보였지만 지금은 그렇게 간단하지 않은 문제가 있습니다.

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

뷰/컴포넌트에서는push의 메서드$router예를 들어, 다음과 같이 프로그램적으로 외우려면:

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

,어디에project의 결과입니다.awaitedAxios HTTP 요구

내 문제

프로그램적으로 새로운 루트를 푸시하거나router-view엘리먼트, 페이지 새로고침(SPA/PWA에서 방지하고 싶은 것...)

My Vue 인스턴스:

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

Vue 라우터에서 루트가 변경될 때마다 페이지가 새로고침되지 않도록 도와주시면 감사하겠습니다.

새로고침 동작은 라우터의 이력 모드와 관련이 있다고 생각합니다.

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

이력 모드를 해제하고, 어떻게 되는지 확인해 주세요.보관하고 싶은 경우는, 이력 모드 문서에 모든 설정이 올바르게 행해졌는지를 확인해 주세요.https://router.vuejs.org/guide/essentials/history-mode.html 를 참조해 주세요.

이게 도움이 됐으면 좋겠다.

vuex-displaystate를 사용하여 저장된 데이터를 유지할 수 있습니다. 페이지가 새로 고쳐질 때마다 데이터가 변경되지 않습니다.

`import createPersistedState from "vuex-persistedstate

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

https://www.npmjs.com/package/vuex-persistedstate 를 참조해 주세요.

언급URL : https://stackoverflow.com/questions/58852108/vue-router-always-reloads-browser-loosing-vuex-state