Is there a way to display a single Vue component in two separate sub routes simultaneously?

Question

Is there a way to display a single Vue component in two separate sub routes simultaneously?

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

Imagine I am setting to display the Dashboard component for both /store and /platform, and the ProductView component for /store/products and /platform/products. However, there seems to be a issue as when accessing the urls /store/products or /platform/products, it's actually rendering the Dashboard component.

javascript vue.js routes vue-router

Answer 1

Answer №1

Your code is having an issue where you are including a slash before each child route ('/products'). You should remove it to resolve the problem.

Answer 2

Your code is having an issue where you are including a slash before each child route ('/products'). You should remove it to resolve the problem.

Answer 3

Answer №2

Your code still includes a component in the parent route with the children:

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

However, according to the Vuejs documentation, the parent route should not have a component 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
        }
      ]
    }
  ]
})

Therefore, your code should look like this instead:

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 correctly mentioned that the child route should NOT start with a slash

Answer 4

Your code still includes a component in the parent route with the children:

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

However, according to the Vuejs documentation, the parent route should not have a component 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
        }
      ]
    }
  ]
})

Therefore, your code should look like this instead:

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 correctly mentioned that the child route should NOT start with a slash

Is there a way to display a single Vue component in two separate sub routes simultaneously?

Answer №1

Answer №2

Similar questions

Declare `document.body` as the designated container element for the material-ui Tooltip

Ensuring continuity of session in WebRTC audio calls post page refresh

Enlarging the current division while reducing the size of the others when hovering

Using Plotly.js to generate a visually stunning stacked and grouped bar chart

Encountering difficulties retrieving information from an API using Angular

JavaScript - What is the best way to add the same object value into an array?

What's the best way to incorporate a clear options icon when choosing an option in a MaterialUI select component?

"Headers cannot be set once they have been sent to the client... Error handling for unhandled promise rejection

Unit testing for changes in AngularJS $scope variables within the .then() function

Add hyphens to separate the words in AngularJS if there is a break in the string

Utilizing a potentially existing Angular service

Searching and selecting columns in React using Material-UI

Rearranging the order of Div elements within a main container using JavaScript DOM manipulation

React - retrieving the previous page's path after clicking the browser's "back" button

Struggling to populate dropdown with values from array of objects

using database URL as an AJAX parameter

Can two Angular element components be utilized simultaneously on a single page in Angular 6?

In order for elements in an iteration to function correctly, it is necessary to include the 'v-bind:key' directives as suggested by the eslint

What's the best way to dynamically show Bootstrap collapse panels in a loop with AngularJS ng-repeat?

select items using a dropdown menu in an Angular application