[Vuejs]-Nested Named Sub Component Routing in Vue3 and Vue-Router 4

by

0👍

One way that is sort of working is:

path: '/',
name: '',
components: {
  appbar: () => import('@/components/Appbar.vue'),
  navigation: () => import('@/components/Navigation.vue'),
  default: () => import('@/views/TripleView.vue')
},
children: [
  {
    path: '',
    name: 'home',
    props: { 
      first: { component: 'Incoming', title: 'Incoming Calls'}, 
      second: { component: 'FollowUp', title: 'Follow Up Calls' }, 
      third: { component: 'Agent', title: 'Active Agents' },
    },
    components: {
      first: () => import('@/views/Table.vue'),
      second: () => import('@/views/Table.vue'),
      third: () => import('@/views/Table.vue')
    },
    children: [
      {
        path: '',
        components: 
        {
          Incoming: () => import('@/components/home/IncomingCallTable.vue'),
          FollowUp: () => import('@/components/home/FollowUpTable.vue'),
          Agent: () => import('@/components/home/AgentsTable.vue')
        }
      }
    ]
  },

And have the table take in a name via the prop and use it for the router-named view.

But it doesn’t work when you route back to home from another page, only the initial load works.

Leave a comment