Дочерний роутинг не работает, в чем причина?

Question

[konst34]

Делаю роутинг, выглядит дело так:

import { createRouter, createWebHistory } from "vue-router";
import Main from "../main.vue";
import Section from "../Section.vue";

const routes = [
  {
    path: "",
    name: "Main",
    component: Main,
    children: [
      {
        path: "/",
        name: "Section",
        component: Section,
      },
    ],
  },
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

export default router;

При этом в элементе Main у меня находится Хедер и Футер, а в элементе Section блок, который должен находиться МЕЖДУ Хедером и Футером.

Но отображается у меня ТОЛЬКО Хедер и Футер.
Либо, если я заменяю Main на компонент Section, то отображается тот блок, который должен быть МЕЖДУ Футером и Хедером, а сами Футер и Хедер при этом не отображаются.

Что я делаю не так?

Answer 1

[Алексей Ярков]

У родителя "/", у дочернего "". Попробуйте так. Ну и в родительском компоненте не забываем <router-view /> добавить, чтобы было куда дочерние рендерить ))

Comments

[konst34]

Спасибо, помогло!