Question

在前端，我想将用户重定向到错误视图，以防初始化出错。为此，我准备了一个特殊的错误视图，可以通过特定的路线调用该视图。为了改善UX，我不想用/error之类的东西代替url，但是我仍然想利用vue路由器。

您知道如何实现吗？

Answer 1

在axios拦截器内部工作，这对我有用（仍然是黑客）

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

Answer 2

您可以使用history.replaceState。 pushState和replaceState是what Vue Router uses internally来操纵URL。在浏览器的控制台中输入此行时，观察地址栏会发生什么情况。

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

Answer 3

在github中有一个讨论：change current component used by router-view without changing current URL

但是，到目前为止，期望功能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标记错误状态。如果为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()
})

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

3 个答案: