URL을 변경하지 않고 vue 라우터 경로 변경

URL을 변경하지 않고 vue 라우터 경로 변경

프런트 엔드에서는 초기화가 잘못되었을 경우에 대비하여 사용자를 에러 뷰로 리다이렉트 합니다.이를 위해 특정 경로를 통해 호출할 수 있는 특별한 오류 보기를 준비했습니다.UX를 개선하기 위해 url을 다음과 같은 것으로 바꾸고 싶지 않습니다./error그래도 vue 라우터를 이용하고 싶습니다.

당신은 이것을 어떻게 달성하는지 알고 있나요?

현재 URL을 변경하지 않고 라우터 뷰에서 사용되는 현재 컴포넌트 변경에 대해 github에서 설명합니다.

그러나 기대 함수는replaceView아직 사용할 수 없습니다.

고객님의 요구와 완전히 동일한 요건을 가지고 있으며 해결 방법을 찾습니다.

이 루트 컴포넌트에는App.vue(Quasar Framework를 사용합니다).템플릿은 다음과 같습니다.

<template>
  <div id="q-app">
    <div v-if="$store.state.g.errorState">
      <the-error-page>Error Message</the-error-page>
    </div>
    <router-view v-else />
  </div>
</template>

vuex 글로벌 스토어를 사용하고 있습니다.state.g.errorState에러 스테이트에 플래그를 붙입니다.이 값이 참일 경우 오류 페이지를 표시하고 그렇지 않을 경우 일반 라우터 뷰를 표시합니다.

페이지에 오류가 있는 경우 올바른 값을 지정하기만 하면 됩니다.state.g.errorState:

<script>
export default {
  data() {
    // ...
  },
  beforeMount() {
    if (somethingWrong) {
      this.$store.commit('g/errorState', true)
    }
  }
}
</script>

분명히,state.g.errorState루트가 변경될 때마다 값을 false로 복원해야 합니다.

const Router = new VueRouter({
  // ...
})

Router.beforeEach((to, from, next) => {
  store.commit('g/errorState', false)
  next()
})

사용할 수 있습니다.history.replaceState. pushState 및 replaceState는 Vue Router가 내부적으로 URL을 조작하기 위해 사용하는 것입니다.브라우저 콘솔에 이 행을 입력하면 주소 표시줄에 어떤 일이 발생하는지 관찰해 주십시오.

history.replaceState({urlPath:'/some/page/on/stackoverflow'},"",'/some/page/on/stackoverflow')

악시오스 인터셉터 안에서 일하는 동안, 이것은 나에게 효과가 있었다(아직도 해킹)

if (error.response.status === 404) {
      router.replace({ name: '404' });
      history.replaceState({}, "Not Found", error.response.request.responseURL)
    }

솔루션:

router/index.displaces:

{
  name: "error",
  path: "*",
  component: () => import("src/pages/error/404.vue"),
},

구성 요소:

this.$router.replace({
   name: "error",
   params: { 0: `/${this.$route.path}` },
   replace: true,
});
return;

언급URL : https://stackoverflow.com/questions/52966463/change-vue-router-route-without-changing-the-url