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()
})

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

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

您可以使用history.replaceState . pushState和replaceState are what Vue Router uses internally来操作URL。观察当您在浏览器的控制台中输入此行时地址栏会发生什么。
history.replaceState({urlPath:'/some/page/on/stackoverflow'},"",'/some/page/on/stackoverflow')

我的解决方案：
在路由器/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;

我使用vuex store提出了解决方案，在store中，我创建了一个状态变量 is404：false。我还创建了一个突变来改变它。在我的App.vue中，我导入了Error.page.vue，并基于我的 is404 变量使用它：

<Error v-if="is404" />

<component v-else :is="currentLayout" />

最后，在router.js中，我捕获到一个错误后，将 is404 变量设置为true：

$store.set("shared/is404", true);

就像这样，当用户键入不存在的URL时，他似乎会看到错误消息，但URL不会改变。