Vue.js框架--嵌套路由（二十）

红太狼 2024-02-18 23:49 68阅读 0赞

**主要操作技能**

***嵌套路由 就是 (路由里面嵌套他的子路由)***  
 子路由关键属性children  
 **1）配置路由**

{
            path: '/user',
            component: Users,
            children: [{  //父子组件配置,注意不能写/
                    path: 'useradd',
                    component: UserAdd
                },
                {
                    path: 'userlist',
                    component: UserList
                },
    
            ]
    
        }

**2）父路由里面配置子路由显示**  
<router-view></router-view>最顶层的出口，渲染最高级路由匹配到的组件

模拟: [http://element-cn.eleme.io/\#/zh-CN/component/installation][http_element-cn.eleme.io_zh-CN_component_installation]

![70][]

**说明： 单击“组件”，左边是导航单击，右边是显示的内容**

**编写代码:**

![70 1][]

**User.vue 用户中心**

<template>
    	<div id="users">
    		<h2>{
       {msg}}</h2><br />
    
    		<div class="user">
    			<div class="left">
    				
    				<ul>
    					<li>
    						<router-link to="/user/useradd">添加用户</router-link>
    					</li>
    					<li>
    						<router-link to="/user/userlist">用户列表</router-link>
    					</li>
    				</ul>
    			</div>
    			<div class="right">
    				
    				
    				
    				
    				<router-view></router-view>
    			</div>
    
    		</div>
    
    	</div>
    </template>
    
    <script>
    	export default {
    		data() {
    			return {
    				msg: '我是用户组件'
    			}
    		}
    	}
    </script>
    
    <style lang="scss" scoped>
    	.user {
    		display: flex;
    		.left {
    			width: 200px;
    			min-height: 400px;
    			border-right: 10px solid #eee;
    		}
    		.right {
    			flex: 1;
    		}
    		
    		li{
    			line-height: 2;
    		}
    	}
    </style>

UserAdd.vue 与UserList.vue 子组件

main.js

import Users from './components/Users.vue' //引入组件
    import UserAdd from './components/user/UserAdd.vue' //引入子组件
    import UserList from './components/user/UserList.vue' //引子组件
    
    //2.配置路由
    const routes = [{
    		path: '/home',
    		component: Home
    	},
    	{
    		path: '/news',
    		name: 'news',
    		component: News
    	},
    	{
    		path: '/user',
    		component: Users,
    		children: [{  //父子组件配置,注意不能写/
    				path: 'useradd',
    				component: UserAdd
    			},
    			{
    				path: 'userlist',
    				component: UserList
    			},
    
    		]
    
    	},

**效果:**

**用户中心**

**![70 2][]**

![70 3][]

**单击用户,显示导航**

![70 4][]

**左边导航，右边显示**

![70 5][]

单击用户列表，右边显示列表

![70 6][]

**直接单击用户默认显示添加用户**

![70 7][]

[http_element-cn.eleme.io_zh-CN_component_installation]: http://element-cn.eleme.io/#/zh-CN/component/installation
[70]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/84fad0e79b41430e8162c98298703528.png
[70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/a709acf1822b40959a63eb63112d22dd.png
[70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/4baed736ceea45348a37b84aa4abbe69.png
[70 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/ecad30779dfb4790bdd92d7533415a2f.png
[70 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/db80eb21a931462f9866befec2832f73.png
[70 5]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/56819101e1c241c495a7f6d823510129.png
[70 6]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/75a8bda1905e45caa7ca4d9e413a7924.png
[70 7]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/55b8c87b0e5b4f0b90e8c5cee2d2042b.png