在 URL 中添加 slug

Question

我在 IIS 中托管一个 Vue SPA。

我正在使用 VueRouter，在我的路线中我有：

const routes = [
    { path: '/', name: 'Home', component: Home },
    { path: '/customers', name:'customers', component: Customers },
    { path: '/qadcustomers', name:'qadcustomers', component: QadCustomers },
    { path: '/customer/:id?', name:'customer', component: Customer, props: true },
    { path: '/qadcustomer/:id?', name:'qadcustomer', component: QadCustomer, props: true },
    { path: '/import', name:'import', component: Import },
];

在网络服务器中，我将文件放在目录中：inetpub/wwwroot/dev/myapplication

我希望在以下位置访问应用程序：

https://myserver/dev/myapplication/ <-- 这将转到首页

https://myserver/dev/myapplication/customers <-- 这将转到客户

https://myserver/dev/myapplication/qadcustomers <-- 这将转到 QadCustomers

现在我的所有页面都在 https://myserver/customers 或 https://myserver/qadcustomers。如何将 slug /dev/myapplication/ 添加到 URL?

当此应用程序进入测试服务器时，slug 将是 /test/myapplication，而在生产中它将是 /regionaloffice/myapplication。

Answer 1

您可以使用 Nested Routes - Vue Router

const router = new VueRouter({
  routes: [
    {
      path: '/dev/myapplication',
      component: MyApplication,
      children: [
        {
          path: 'route1',
          component: Route1
        },
        {
          path: 'route2',
          component: Route2
        }
...

它将为所有路由添加 /dev/myapplication 前缀。

因此您的路线将如下所示：

/dev/myapplication/route1
/dev/myapplication/route2
/dev/myapplication/route3

Answer 2

尝试在构造函数中使用 base 选项：

类型：字符串

默认值：“/”

应用程序的基础 URL。例如，如果整个单页应用程序在 /app/ 下提供服务，那么 base 应该使用值“/app/”

https://router.vuejs.org/api/#linkactiveclass

在 URL 中添加 slug

Add a slug in URL

iis

vue.js

vue-router