更改vue路由器路由而不更改URL

在我的前端中，我想将用户重定向到错误视图，以防初始化出错。为此，我准备了一个可以通过特定路径调用的特殊错误视图。为了改善用户体验，我不想将 url 替换为类似的内容/error，但我还是想利用vue router。

您知道如何实现这一目标吗？

github上有一个讨论：更改 router-view 使用的当前组件而不更改当前 URL https://github.com/vuejs/vue-router/issues/977

然而，期望的功能replaceView至今仍无法使用。

我的要求和你的完全一样，我找到了解决方法：

我有一个名为的路线组件App.vue (I use 类星体框架 https://quasar.dev）。它的模板如下所示：

<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标记错误状态。如果为true，则显示错误页面，否则显示正常的路由器视图。

如果我的页面有错误，我只需将真实值提交给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()
})