vue-在子路由前加/形成绝对路由

在vue-router中，通常我们添加子路由时不会前缀加/，但是也可以加，加上之后，就可以形成类似“绝对路由”的效果。

例子如下

// router.ts
import { createRouter, createWebHistory } from "vue-router";

const Layout = {
  template: `
    <div class="layout">
      this is layout.
      <RouterView />
    </div>
  `,
};

const System = {
  template: `
    <div class="system">
      this is system.
      <RouterView />
    </div>
  `,
};

const User = {
  template: `
    <div class="user">
      this is user.
    </div>
  `,
};

const routes = [
  {
    path: "/app",
    component: Layout,
    children: [
      {
        path: "system",
        component: System,
        children: [
          {
            path: "/sys/user",
            component: User,
          },
        ],
      },
    ],
  },
];

export const router = createRouter({
  history: createWebHistory(),
  routes,
  strict: true,
  sensitive: true,
});

在上面这个例子里，通过访问路由

可以匹配 `/sys/user`（并且 `Layout` 和 `System` 组件会生效）、`/app/system`，但是无法匹配 `/app/system/user`，`/app/system/sys/user`。

这样子的绝对路由，前面不能添加任何路由信息

方便一些情况下的访问。