Vue-Router Abstract Parent Routes

Question

I am trying to port my current site to vuejs. Site map should be:

/login
/signup
/password-reset
/browse
/search
... dozens of other routes

Since some of these routes share a lot of fx, I made them child route parents:

[{ // public routes
  path: '/', 
  component: Auth,
  children: [
    { path: '/login', component: Login },
    { path: '/signup', component: Signup },
    { path: '/password-reset', component: PasswordReset },
  ]
}, 
{ // routes behind Authentication
  path: '/', 
  component: Home,
  children: [
    { path: '/browse', component: Browse },
    { path: '/search', component: Search }
  ]
}]

The problem is obvious: the basic components of Auth and Home are now technically the same route route, and I get routing errors. Since I will have many routes sharing the same base component and fx, I would like them to be children of these abstract states.

Question 1 . How can I implement these routes and their parent abstract states without conflicts and without the need to add all the wrapping logic to them?

2. , () , , ?

Answer 1

, , . , Home Auth. , / Home, Auth. , Auth, .

, Home route , , , :

{
  path: '/',
  component: Home,
  redirect: '/browse',           // Redirect to path, or
  redirect: { name: 'browse' },  // Redirect to named route
  children: ...
}

Auth , "" , , . , vue-router; :

// Routes

{
  path: '/profile',
  component: Profile,
  meta: { auth: true },
}

// Router hooks

router.beforeEach((to, from, next) => {
  if (to.matched.some(route => route.meta.auth) && !authenticated) {
    next('/login');
  } else {
    next();
  }
});