Concise routing in vue?

Question

Vue.js

How can vk-like routing be implemented?
That is, site.ru/id*** = the Profile component, site.ru/group*** = the Group component, and the main page changes depending on whether the user is authorized. That is, if authorized, then site.ru = Dashboard, and if not, then Landing.
At the moment, everything is built on a very deep nesting, which is inconvenient and ugly.

Answer 1

How can vk-like routing be implemented?
That is, site.ru/id*** = Profile component, site.ru/group*** = Group component

new Router({
  // ...
  routes: [
    {
      path: '/(id):id',
      name: 'Profile',
      component: Profile,
    },
    {
      path: '/(group):groupId',
      name: 'Group',
      component: Group,
    },
  ],
});

// Home.vue
<Dashboard v-if="isAuth" />
<Landing v-else />