Why is the vue-router component not being rendered at address?

Question

Vue.js

Registered the component as a child with its own path:

{
    path: '/auth',
    name: 'Auth',
    component: Auth,
    children: [
      {
        path: '/auth/log',
        alias: '/',
        name: 'Login',
        component: Login,
      },
      {
        path: '/auth/reg',
        name: 'Register',
        component: Register,
      },
      {
        path: '/auth/forgot',
        name: 'Forgot',
        component: ForgotPassword,
      },
      {
        path: '/auth/complete',
        name: 'complete',
        component: afterRAF,
      },
    ]
  },

It is the very last one in the array:

{
        path: '/auth/complete',
        name: 'complete',
        component: afterLog,
      },

The problem is that it is not displayed at /auth/complete, but if you set it to a type address /auth-complete, everything will work.
Initially, I thought that the point was that I could not get the child component not through the parent, and I turned out to be right by checking like this:

1. Ввёл другой url: /auth/reg
2. Получил ту же проблему

Why is this happening?

Answer 1

Set child components to relative paths. Well, in router-linkin it’s :tobetter to write not a path, but an object with a name and parameters, something like {name: 'complete'}(and it’s better to clean up the registers of names :) )