如何使用动态子路由定义 vue 路由器？

Question

我正在尝试这样的事情

{
    path: "/portfolio",
    component: () =>
      import("../common/components/Layout/Layout/Profile/ProfileLayout"),
    meta: { requiresAuth: false },
    children: [
      {
        path: "/:username",
        component: () =>
          import(/*webpackChunkName: "profile"*/ "../modules/Profile/Profile"),
      },
    ],
},

但是没有子路由的路由完美运行时，这段代码无法运行

{
  path: "/profile/:userName",
  component: () => import("../modules/profile/UserProfile"),
}

我如何解决第一段代码？

Answer 1

您应该从子路由路径中删除前置斜杠：

path: ":username",

或试试看：

path: "user/:username",

然后你就可以像/portfolio/user/john

一样访问url

如何使用动态子路由定义 vue 路由器？

How to define vue routers with dynamic child routes?

vue.js

vue-router

vuejs2