[Vuejs]-How can I show one same Vue component in two different sub route?

0👍

The problem with your code is you write a slash before each child route (‘/products’) remove it

0👍

In your codes, you still have a component on the route with the children:

{
    path: '/store',
    component: Dashboard,
    children: [
        {
            path: '/products',
            component: ProductsView,
        },
    ]
},

However, the Vuejs documentation shows that there shouldn’t be a component in the parent route, like this:

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User,
      children: [
        {
          // UserProfile will be rendered inside User's <router-view>
          // when /user/:id/profile is matched
          path: 'profile',
          component: UserProfile
        },
        {
          // UserPosts will be rendered inside User's <router-view>
          // when /user/:id/posts is matched
          path: 'posts',
          component: UserPosts
        }
      ]
    }
  ]
})

So, instead, you should have:

const routes = [
{
    path: '/',
    component: LogInView
},
{
    path: '/store',
    // component: Dashboard, // <-- should be removed
    children: [
        {
            path: 'products',
            component: ProductsView,
        },
    ]
},
{
    path: '/platform',
    children: [
        {
            path: 'products',
            component: ProductsView,
        },
    ]
},
{
    path: '/platform',
    component: Dashboard
} ]

@TEFO was right to point out that the child route should NOT contain a slash

Leave a comment