时间戳

首页 > 解决方案 > 在 Vue.js 中不修改 URL 重定向到 404 页面

javascript - 在 Vue.js 中不修改 URL 重定向到 404 页面

问题描述

在我的 Vue.js 项目中，如果路由参数无效，我想显示我的 404 页面。目前，我为此使用以下代码：

this.$router.replace({ path: '/404' });

有没有办法在不修改 URL 的情况下做到这一点？我希望用户仍然能够复制浏览器的原始 URL 行。有某种silent: true参数吗？

标签： javascriptvue.jsvue-router

解决方案

有了vue-router，URL 就是事实的来源。如果 URL 发生变化，渲染也会发生变化。您不能“暂停”路由器。（这是一个vue-router困扰我多年的缺陷，但我离题了。）

你只需要显示 404 页面而不修改路由。在您的根组件中有一些display404数据属性，您可以将其设置为在模板中手动显示 404 页面而不是<router-view>，例如：

<div>
  <my-404-page v-if="display404"/>
  <router-view v-else/>
</div>

从任何组件显示 404 页面：

this.$root.display404 = true

当然这只是一个基本的例子来说明我的意思，你可能想使用 Vuex 来共享状态，或者使用事件总线，或者你可以以其他适合你的方式显示 404 页面，等等。

推荐阅读