Question

我有一条路线：

{
    path: '/user',
    name: 'user',
    component: () => import('@/views/users/Users.vue'),
    children: [
        {
        path: '/:id/:username?',
        name: 'userData',
        component: () => import('@/components/users/User.vue'),
        },
    ],
},

我的设置路由器：

const router = new VueRouter({
   mode: 'history',
   base: process.env.BASE_URL,
   scrollBehavior: () => ({ y: 0 }),
});

我在路由中的子元素有问题。当我访问网站http://localhost:8080/user时，我看到了来自databse的所有用户的列表。但是，当我去以下站点时：http://localhost:8080/user/1/john vue再次用所有用户（视图Users.vue）加载视图，这里我需要加载一个用户数据的组件（组件User.vue）。参数username是最优的。

Answer 1

问题是您要添加以 / 为前缀的子路由。文档清楚地表明

<块引用>

请注意，以 / 开头的嵌套路径将被视为根路径。这允许您利用组件嵌套而不必使用嵌套 URL。

你应该按照给定的方式重写子路由，它应该可以工作。

children: [
    {
        path: ':id/:username?',
        name: 'userData',
        component: () => import('@/components/users/User.vue'),
    },
],

您只能将 / 添加到根路由。任何以斜杠开头的路由都将被视为 vue-router 中的根路由。

子路由中的Vue路由器动态ID和名称

1 个答案: