Official website address: https://router.vuejs.org/zh-cn/essentials/nested-routes.html
Route nesting is generally used in the background management system
Give a relatively simple small case
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script> <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.js"></script> <style> .layout { width: 600px; margin: 100px auto; } .left { width: 200px; height: 500px; float: left; border: 1px solid red; } .right { width: 380px; height: 500px; float: right; border: 1px solid green; } .top { height: 100px; border: 1px solid black; } </style> </head> <script type="text/html" id="templateId"> <div class="layout"> <div class="left">左边菜单<br/><br/> <router-link to="/menu1/login">登录组件</router-link><br/><br/> <router-link to="/menu1/register">Register Components</router-link> </div> <div class="right"> <div class="top"> top content </div> <div class="content"> <br/> <router-view></router-view> </div> </div> </div> </script> <body> <div id="app"> <router-link to="/menu1">菜单1</router-link> <router-link to="/menu2">菜单2</router-link> <router-view></router-view> </div> </body> <script> // 1. Register component const menu1 = { template:"#templateId" } const menu2 = { template: '<div>I am menu 2</div>' } const login = { template: '<div>I am the login component</div>' } const register = { template:'<div>i am register components</div>' } // 2. Create a routing object and set routing rules const router = new VueRouter({ routes:[ { path:'/menu1', component:menu1, children:[ {path:'login',component:login}, {path:'register',component:register} ] }, { path:'/menu2', component:menu2 } ] }) new View({ el: "#app", router }) </script> </html>