使用 Vue-Router 自定义路由前缀模式

Question

我正在尝试使用 Vue-Router 在我的新项目中对 URL 进行模式化，因此它们看起来就像现有（非 Vue）应用程序中的 URL。现有的应用程序 URL 如下所示：

• /#!page1
• /#!page2

我的 Vue Router 目前看起来像这样：

const router = new VueRouter({
  routes: [
    {
      path: '/',
      redirect: '/page1'
    },
    {
      path: '/page1',
      component: Assessments
    },
    {
      path: '/page2',
      component: Assessments
    }
  ]
})

但是，当然，这会生成如下所示的 URL：

• /#/page1
• /#/page2

如何配置我的路由器以模仿该/#!route模式？

Answer 1

您可以使用以下base选项：

根据

• 类型：字符串
• 默认： "/"

应用程序的基本 URL。例如，如果整个单页应用程序都在 下提供/app/，则 base 应使用值 "/app/"。

https://router.vuejs.org/en/api/options.html#base

我已经用你的案例试过了，它也适用于/#!.