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

Question

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

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

Answer 1

github上有一个讨论：更改router-view使用的当前组件而不更改当前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()
})

Answer 2

在 axios 拦截器内工作，这对我来说很有效（仍然是一个黑客）

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

Answer 3

您可以使用history.replaceState。PushState和ReplaceState是Vue Router 在内部使用来操作 URL 的。当您在浏览器控制台中输入此行时，观察地址栏会发生什么。

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