Vue 中如何给路由添加一个前缀（或称基路径）

引言

Vue Router 是 Vue.js 框架中用于管理应用程序路由的一个强大工具。它提供了多种选项来配置路由行为，包括添加一个基路径（或前缀）到所有路由 URL。此功能在以下场景中非常有用：

• 将 SPA 部署到子目录中
• 使用自定义域名托管 SPA
• 创建多租户应用程序

使用 base 配置项

在 Vue Router 中，可以通过设置 base 配置项来添加基路径。该选项接受一个字符串作为参数，代表要添加到所有路由 URL 前面的路径。

const router = new VueRouter({
  base: '/my-app/',
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
})

在这个例子中，我们添加了 /my-app/ 作为基路径。现在，所有路由 URL 都会以 /my-app/ 开头，例如：

• /my-app/
• /my-app/about

子目录部署

使用基路径的最常见场景之一是将 SPA 部署到子目录中。例如，如果您有一个名为 my-app 的应用程序，并且您希望将其部署到 https://example.com/my-app/，则需要设置如下 base 配置项：

const router = new VueRouter({
  base: '/my-app/',
  // ...
})

自定义域名

另一个常见的场景是使用自定义域名托管 SPA。如果您有一个名为 my-app 的应用程序，并且您希望将其部署到 https://my-app.example.com/，则需要设置如下 base 配置项：

const router = new VueRouter({
  base: 'https://my-app.example.com/',
  // ...
})

多租户应用程序

在多租户应用程序中，每个租户都可以拥有自己的子域名或 URL 前缀。通过使用 base 配置项，您可以为每个租户创建一个唯一的路由实例，并设置相应的基路径。

注意事项

使用基路径时需要考虑以下注意事项：

• 确保基路径与服务器配置兼容。
• 更新所有内部和外部链接以反映新的基路径。
• 在开发环境中测试基路径，以确保应用程序按预期工作。

结论

在 Vue 中添加基路径是一个强大的功能，它允许您自定义应用程序的路由 URL 并将其部署到各种环境中。通过设置 base 配置项，您可以轻松地将 SPA 部署到子目录、使用自定义域名或创建多租户应用程序。