Nested routes, are routes that live within other routes. Mapping nested routes to nested components is a common need, and it's also very simple with vue-router
.
All we have to do is to declare "subRoutes" and use a nested <router-view>
.
Project structure
Assuming we have the preceding structure, we can proceed to the following changes.
src/main.js
:
router.map({ '/': { component: require('./components/Hello.vue') }, '/login': { component: require('./components/Login.vue') }, '/stories': { component: require('./components/Stories.vue'), subRoutes: { '/famous': { component: require('./components/Famous.vue') }, } }, })
As seen in the preceding example, we've created a new route linked to Stories.vue
and a subRoute within, linked to Famous.vue
.
src/Stories.vue
:
<template> ... // nested outlet <router-view></router...