Почему показывается тот же родительский копонент для вложенного роута?

Question

[postya]

Имеется родительский роут у которого есть компонент
Имеется для него nested route, у которого есть свой компонент

Почему вложенный роут показывает тот же родительский компонент, а не свой?

если же вложенный роут сделать как самостоятельный обычный роут, то все работает и его компонент отображается, а вот с nested почему-то не работает

Родительский route:


Вложенный route:


index.js:

import Locations from "../views/Locations";
import PreviewLocation from "../components/PreviewLocation";

Vue.use(VueRouter);

const routes = [
{
    path: "/locations",
    name: "Locations",
    meta: {
      title: "Locations"
    },
    component: Locations,
    children: [
      {
        path: "archangel-falls",
        name: "Archangel Falls",
        component: PreviewLocation,
        meta: {
          title: "Archangel Falls"
        }
      }
    ]
  }
]

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes
});

router.beforeEach((to, from, next) => {
  document.title = to.meta.title;
  next();
});

export default router;

Answer 1

[Aetae]

Потому что так и задумано. Можно делать цепочки вложенных router-view.
Читай документацию.

Comments

[postya]

Спасибо! я просто неправилньо оказывается сделал, сейчас просто роуты разделил на разные файлы