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

Question

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

• /#!page1

• /#!page2

我的 Vue 路由器目前看起来像这样：

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/

下提供，然后基础应该使用该值

"/app/"

。

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

我已经在你的案例中尝试过了，它也适用于

/#!

。

Answer 2

对于 Vue 3 和 Vue Router 4 基本选项现在作为第一个参数传递给 createWebHistory：

import { createRouter, createWebHistory } from 'vue-router'
    createRouter({
        history: createWebHistory('/base-directory/'),
        routes: [],
})

从 Vue 2 文档迁移