二十二、Vue之路由中的嵌套

  路由中的嵌套主要实现的功能是：界面左侧导航栏不动，点击左侧导航栏，右侧的内容区随之改变。

  实现案例：点击“用户中心”，左侧导航栏有“增加用户”和“管理用户”导航按钮，右侧默认加载“增加用户”界面，点击两个导航按钮，右侧内容随之改变。

1.增加用户界面：

<template>
    <div>
        增加用户
    </div>
</template>

2.管理用户界面：

<template>
    <div>
        管理用户
    </div>
</template>

3.用户界面

<template>
    <div>
    
        <div class="user">
    
            <div class="user-left">
    
                <div class="user-item">
    				// 配置导航
                    <router-link to="/user/useradd">增加用户</router-link>
    
                </div>
    
                <div class="user-item">
    				// 配置导航
                    <router-link to="/user/usermanagement">管理用户</router-link>
    
                </div>
    
            </div>
            <hr>
    
            <div class="user-right">
    			// 待路由子组件
                <router-view></router-view>
    
            </div>
    
        </div>
    
    </div>
</template>

<style lang="scss" scoped>
.user{
    display: flex;
    flex-direction: row;
    font-size: 28px;
    border-right: solid 1px #000;
}
.user-left{
    display: flex;
    flex-direction: column;
    width: 30%;
    margin-right: 20px;
}
.user-item{
    margin-top: 20px;
    text-align: center;
}
.user-right{
    width: 70%;
    margin-left: 20px;
}
</style>

3.配置嵌套路由

main.js

import UserAdd from "./components/User/UserAdd.vue";
import UserManagement from "./components/User/UserManagement.vue";

// 2.配置路由
const routes = [
  { 
    path: '/user', 
    component: User,
    children: [
      // 注意，这里的路径不能再前面加“/”，因为是子组件，默认有一个“/”
      { path: 'useradd', component: UserAdd },
      { path: 'usermanagement', component: UserManagement }
    ]
  },

  // 默认跳转路由（‘*’表示没有匹配到任何路由，此时重定向到默认路由）
  { path: '*', redirect: '/left' }
]

4.在根节点中配置“用户中心”路由，默认加载“增加用户”界面

App.vue

<router-link to="/user/useradd">用户中心</router-link>