Vue 3 Router does not append a trailing slash to a parent view and so will not render the default child vue component

Question

My nested vue-router will not append the trailing slash to the parent link and so will not render the assigned component. If I manually enter the slash into the url and hit enter in the browser it will render.

The nested view uses 3 components:

CustomersView.vue
CustomersMainView.vue
CustomersDetailView.vue

The nested path structure looks like:

{
    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 } },
            ]
        },
}

I can see all of these views by manually entering the url.

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

But when the link is rendered using the in my sidebar navigation it does not append the trailing slash:

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

It directs to

myapp.com/customers

It leaves off the trailing slash and so will not render the CustomerMainView component as directed in the router.

How do I get that link to append the trailing slash? I thought it would do it automatically.

Fath Fath · Accepted Answer · 2021-03-26T02:59:19

have you tried adding the slash in the child routes of your component?

 {
    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 } },
    ]
},

Vue 3 Router does not append a trailing slash to a parent view and so will not render the default child vue component

1 Answers