1. 定义

/user/johnny/profile                     /user/johnny/posts
+------------------+                  +-----------------+
| User             |                  | User            |
| +--------------+ |                  | +-------------+ |
| | Profile      | |  +------------>  | | Posts       | |
| |              | |                  | |             | |
| +--------------+ |                  | +-------------+ |
+------------------+                  +-----------------+

父组件里面想根据需要放置一些不同的子组件，那么可以使用嵌套路由

值得注意的是：<router-view> 是为 子路由组件 占位的，和 <router-link> 不一定要写在同一个组件中

2. 编码

配置路由信息表，表达嵌套关系，Nav.vue 里面嵌入 Login.vue or Register.vue

/src/router/index.ts

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'

const routes: Array<RouteRecordRaw> = [
    {
        path: "/",
        component: () => import('../pages/Nav.vue'),
        children: [
            {
                // 默认情况下，根组件中显示 Login 子组件
                path: "",
                name: "Login",
                component: () => import('../pages/Login.vue')
            },
            {
                path: "register",
                name: "Register",
                component: () => import('../pages/Register.vue')
            }
        ]
    },

]

const router = createRouter({
    history: createWebHistory(),
    routes: routes
})



export default router

父组件 Nav.vue

<template>
    <h1>导航</h1>
    <router-link to="/">登录</router-link>
    <router-link to="/register" style="margin-left: 10px;">注册</router-link>
    <hr>
    <!-- 子路由的占位符 -->
    <router-view></router-view>
</template>

子组件 Login.vue and Register.vue

// Login.vue
<template>
<h3>登录</h3>
</template>

// Register.vue
<template>
<h3>注册</h3>
</template>

效果如下

登录页 ↓

注册页 ↓

假如登录和注册不在根路径上，应该怎么写呢？

如下，父组件的路径改为 /user

那么父组件的跳转就应该 ↓

访问时，要加上路径前缀 /user