如何在 Vue.js 3 中使用 Vue 路由器将 404 路由重定向到 Home答案

【问题标题】：How to redirect a 404 route to Home using vue router in Vue.js 3如何在 Vue.js 3 中使用 Vue 路由器将 404 路由重定向到 Home
【发布时间】：2021-01-26 11:18:32
【问题描述】：

全能社区你好！

Vue.js 3 有点问题。在路由器中，我无法定义任何未知路由都应该重定向到“/”。

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
 {
    path: "/*",
    redirect: "/",
  }
]

在这里，我已经测试了 redirect: "/" 是否有效，但 path: "/*" 无效。路径“/”仅适用于 domain.com/...我也测试过 path: "*" 但我收到此错误：

“未捕获的错误：路由“”应该是“/”。”

如何在最新的 Vue.js3 中进行 404 重定向？

【问题讨论】：

标签： javascript vue.js vue-router vuejs3 vue-router4

【解决方案1】：

在与 Vue 3 兼容的 Vue 路由器 4 中，您可以 Catch all / 404 Not found Route 如下：

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: '/:pathMatch(.*)*',
    redirect: "/",
  }
]

LIVE DEMO

【讨论】：