VuePress 1.5配置：访问不存在路由时重定向至根路径的方法

方法一：自定义404页面（推荐） #

1. 在项目的.vuepress目录下创建pages文件夹（不存在则新建）。
2. 在pages文件夹中新建404.md文件，写入以下内容：

---
layout: Page
---

<script>
export default {
  mounted() {
    // 页面挂载后立即重定向到根路径
    this.$router.push('/')
  }
}
</script>

当用户访问不存在的路由时，VuePress会加载这个自定义404页面，通过Vue Router自动完成跳转。

方法二：通过Webpack配置修改路由规则 #

如果想直接修改路由表逻辑，可在.vuepress/config.js中添加chainWebpack配置：

module.exports = {
  chainWebpack: (config, isServer) => {
    // 仅在客户端构建时修改路由规则
    if (!isServer) {
      config.plugin('vue-router').tap(args => {
        // 向路由数组末尾添加通配符重定向规则
        args[0].routes.push({
          path: '*',
          redirect: '/'
        })
        return args
      })
    }
  }
}

该方式直接修改Vue Router的路由配置，所有未匹配到的路由都会被强制重定向到根路径，无需依赖404页面。

注：两种方法二选一即可，方法一更简单直观，适合大多数场景；方法二更偏向底层配置，适合需要灵活控制路由逻辑的场景。

内容的提问来源于stack exchange，提问作者Anthony Phan