Vue 3 라우터는 부모 뷰에 후행 슬래시를 추가하지 않으므로 기본 자식 vue 컴포넌트를 렌더링하지 않습니다.

Vue 3 라우터는 부모 뷰에 후행 슬래시를 추가하지 않으므로 기본 자식 vue 컴포넌트를 렌더링하지 않습니다.

네스트된 vue-router는 후행 슬래시를 부모 링크에 추가하지 않으므로 할당된 컴포넌트를 렌더링하지 않습니다.URL에 슬래시를 수동으로 입력하고 브라우저에서 Enter 키를 누르면 렌더링됩니다.

네스트된 뷰에는 다음 3가지 컴포넌트가 사용됩니다.

1. Customers View(고객 보기)표시하다
2. CustomersMainView(고객 메인뷰)표시하다
3. Customers Detail View (고객 상세보기)표시하다

중첩 경로 구조는 다음과 같습니다.

{
    path: '/app',
    component: Dashboard,
    children: [
        { path: 'dashboard', name: 'DashboardHome', component: DashboardHome, meta: {requiresAuth: true }},
        { path: 'my-profile', name: 'MyProfileView', component: MyProfileView, meta: {requiresAuth: true }},
        { path: 'contacts', name: 'ContactsView', component: ContactsView, meta: {requiresAuth: true }},
        {{
            path: 'customers',
            name: 'CustomersView',
            component: CustomersView,
            meta: {requiresAuth: true },
            children: [
                { path: '', name: 'CustomersMainView', component: CustomersMainView, meta: {requiresAuth: true } },
                { path: 'detail/:ID', name: 'CustomerDetailView', component: CustomerDetailView, meta: {requiresAuth: true } },
            ]
        },
}

URL을 수동으로 입력하면 이러한 뷰를 모두 볼 수 있습니다.

myapp.com/customers/ <-- This renders the `CustomerMainView` properly

그러나 사이드바 네비게이션에서 를 사용하여 링크를 렌더링할 때 후행 슬래시는 추가되지 않습니다.

<!-- Customers -->
    <div class="nav-category-container">
        <div class="nav-category-item">
            <router-link :to="{ name: 'CustomersView', params: {}}">Customers</router-link>
        </div>
    </div>

로 향하다

myapp.com/customers

후행 슬래시를 남기기 때문에 라우터의 지시대로 CustomerMainView컴포넌트를 렌더링하지 않습니다.

그 링크를 어떻게 하면 후행 슬래시를 추가할 수 있죠?자동으로 되는 줄 알았어요.

컴포넌트의 자경로에 슬래시를 추가해 본 적이 있습니까?

 {
    path: 'customers',
    name: 'CustomersView',
    component: CustomersView,
    meta: {requiresAuth: true },
    children: [
        { path: 'customers', name: 'CustomersMainView', component: CustomersMainView, meta: {requiresAuth: true } },
        { path: 'detail/:ID', name: 'CustomerDetailView', component: CustomerDetailView, meta: {requiresAuth: true } },
    ]
},

언급URL : https://stackoverflow.com/questions/66809362/vue-3-router-does-not-append-a-trailing-slash-to-a-parent-view-and-so-will-not-r