경로에 VueJS 라우터를 사용하여 매개 변수가 있는 경우 다른 구성 요소를 로드하는 방법

경로에 VueJS 라우터를 사용하여 매개 변수가 있는 경우 다른 구성 요소를 로드하는 방법

경로에 소품이 포함되어 있다면 다른 VueJS 구성품을 적재할 수 있는 적절한 방법을 찾고 있다.

예를 들어, 만약 내가 에 간다면

/users

사용자 목록 페이지를 가져오고 다음 페이지로 이동하려면

/users/1

나는 사용자 프로필 페이지로 갈 것이다.

어렸을 때 매개 변수를 사용하여 다른 경로를 추가하려고 했지만 도움이 되지 않는 것 같다.

{
            path: "users",
            name: "users",
            component: UsersList,
            children: [
                {
                    path: "users/:userId",
                    name: "User Profile",
                    component: UserProfile,
                },
            ]
},

다음과 같은 방법으로 사용자 프로필 경로를 푸시한다.

this.$router.push({ path: 'users', name: 'User Profile', query: { userId: row.id }})

좋은 생각 있어?

그것은 간단하다.이것이 당신이 해야 할 일이다.

{
    path: "users",
    name: "users",
    // IMPORTANT - UserParent contains `<router-view></router-view>`
    component: UserParent,
    children: [
        {
            // IMPORTANT - NEEDS TO BE BLANK
            path: "",
            name: "user-list",
            component: UserList,
        },

        {
            path: ":userId",
            name: "user-profile",
            component: UserProfile,
        }
    ]
}

이 노선은 최종 노선을 형성하기 위해 연결될 것이다.

참조URL: https://stackoverflow.com/questions/51945082/how-to-load-different-component-if-route-has-params-using-vuejs-router