在不更改 URL 的情况下更改 vue 路由器路由答案

【问题标题】：Change vue router route without changing the URL在不更改 URL 的情况下更改 vue 路由器路由
【发布时间】：2019-03-28 17:16:09
【问题描述】：

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

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

【问题讨论】：

标签： vue.js vuejs2 vue-router

【解决方案1】：

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

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

【讨论】：

谢谢，但我想要实现的是另一种方式。我想更改路由器视图而不更改地址栏中的 url。
@jimmy 是的，我明白了。我的意思是在导航到错误视图后立即使用 replaceState 从实际 URL 中手动删除 /error 部分:)
这确实是一个选择。谢谢。
@jimmy 我又在看你的问题，我想知道为什么你不能为你的错误视图设置an alias？
为什么要做一些简单的事情，而它可以实现得更复杂。谢谢，这很优雅。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

在 axios 拦截器中工作，这对我有用（仍然是 hack）

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

【讨论】：

【解决方案4】：

我的解决方案：

在路由器/index.js 中：

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

在组件中：

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

【讨论】：