Vue-Router 第四节：嵌套路由

一些应用程序的 UI 由多层嵌套的组件组成。在这种情况下，URL 的片段通常对应于特定的嵌套组件结构。

   //  router/index.ts 页面
   // 嵌套路由
    {
        path: '/user/:id?',
        component: import("@/views/user/index.vue"),
        children:
            [    
                // 如果想要打开此页面直接可以看见userOne，就可以加一个空的嵌套路径
                // { path: '', component: import("@/views/user/userOne.vue") },  
                { path: 'userOne', component: import("@/views/user/userOne.vue") },
                { path: 'userTwo', component: import("@/views/user/userTwo.vue") }
            ]
    }

   <!--App.vue-->
    <router-link to="/user">进入user路由页面</router-link> 
    <br>
    <router-link to="/user/userOne">进入userOne路由页面</router-link> 
    <br>
    <router-link to="/user/userTwo">进入userTwo路由页面</router-link> 

<!-- user/index.vue -->
<template>
    <div style="background-color: pink;">
        <H1>
            欢迎进入技术部专属页面！
        </H1>
        <router-view></router-view>  // 不要忘记加
    </div>
</template>

注：不要忘记在user/index.vue里写 <router-view></router-view>

进入user/index.vue页面；想要打开此页面直接可以看见userOne或其他，就可以加一个空的嵌套路径。

进入userOne页面:

进入userTwo页面: