Why is the same parent component shown for a nested route?

Question

Vue.js

There is a parent route that has a component
There is a nested route for it that has its own component

Why does a nested route show the same parent component and not its own?

if the nested route is made as an independent regular route, then everything works and its component is displayed, but for some reason it does not work with nested

Parent route:


Nested 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

Because that's how it's meant to be. You can make nested chains router-view.
Read documentation.