...

En este ejemplo la ruta padre sería /about, y la ruta hija /about/detalle. A la hora de definir rutas hijas, es importante tener en cuenta que el path no debe incluir la barra ("/"), pues si lo hace lo toma como lo que hay inmediatamente después de la url de nuestro sitio.

Añadir rutas dinámicamente

Podemos añadir rutas en tiempo de ejecución, con la instrucción addRoute que nos proporciona el propio router. Para ello, en archivos JavaScript tendremos que importar el router, y si es desde nuestros componentes podemos acceder directamente a través de this.$router. La función addRoute tiene un primer parámetro opcional en el que le debemos indicar el nombre de la ruta padre si queremos que sea una sub-ruta, y el otro parámetro será el objeto de la ruta:

// Ruta normal
this.$router.addRoute({ path: "/algo", name: "Algo", component: Algo });
// Sub ruta
this.$router.addRoute("NombrePadre", { path: "algo", name: "Algo", component: Algo });

Podemos encontrar este método, así como el resto de métodos que ofrece Vue Router en su documentación API Reference.

Vista del router

El router habrá que incluirlo como un componente más. Así, podemos definir la parte de la pantalla que cambiará cuando se cambie de ruta, pudiendo dejar fijo, por ejemplo, un menú lateral, y que sólo se tenga que cargar el contenido de la página.

...