Почему по адресу не отображается компонент vue-router?

Question

[alaskafx]

Зарегистрировал компонент как дочерний со своим путём:

{
    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,
      },
    ]
  },

Он самый последний в массиве:

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

Проблема в том, что он не отображается по адресу /auth/complete, но если выставить ему адрес типа /auth-complete - всё будет работать.
Изначально я подумал, что дело в том, что я не могу достать дочерний компонент не через родителя и оказался прав, проверив так:

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

Почему так происходит?

Answer 1

[Антон Антон]

Задай дочерним компонентам относительные пути. Ну и в router-link в :to лучше писать не путь, а объект с именем и параметрами, что-то типа {name: 'complete'} (и лучше навести порядок с регистрами имен :) )

Comments

[alaskafx]

Понял, спасибо!
А как бы вы сделали имена?)
Возьму пример с Вас )

[Антон Антон]

alaskafx, точно всё в едином стиле (сейчас последний пункт с маленькой буквы, остальные - с большой). ну а kebab-case, snake_case или camelCase - зависит от основного стиля именования переменных в проекте. лично я предпочитаю camelCase. а PascalCase традиционно для имен интерфейсов и классов.

[alaskafx]

Антон Антон, Понял, буду использовать так.
А вот я сделал компонент теперь вне родительского /auth и он так же не отображается:

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

[Антон Антон]

alaskafx, а с относительными путями что?

{
    path: 'auth',
//
    children: [
      {
        path: 'log',
//        alias: '/', // так не надо, лучше редирект навесить в хуках роутера в связи со стором/другим признаком залогиненности
//
      },
      {
        path: 'reg',
//
      },
      {
        path: 'forgot',
//
      },
      {
        path: 'complete',
//
      },
    ]
  },