element ui框架（嵌套路由）

Posted 2022-09-24 嵌入式-老费

【 声明：版权所有，欢迎转载，请勿用于商业用途。 联系信箱：feixiaoxing @163.com】

        实际项目中，很多应用都是单页面应用。也就是说，在输入用户名和密码之后，用户只需要进入一个页面就可以完成所有的操作。当然，说是单页面应用，不同的功能还是需要子路由来实现的。这就是本文要说的嵌套路由。

        前面几节已经完成了基本的网页输出，今天可以通过修改Main.vue的方法来进一步实现嵌套路由。

1、修改Main.vue

<template>
  <div>
	<el-container>
		<el-aside width="200px">
			<el-menu :default-openeds="['1']">
				<el-submenu index="1">
					<template slot="title"><i class="el-icon-message"></i>会员管理</template>
					<el-menu-item-group>
						<el-menu-item index="1-1">
							<router-link to="/Member/Level">会员等级</router-link>
						</el-menu-item>
						<el-menu-item index="1-2">
							<router-link to="/Member/List">会员列表</router-link>
						</el-menu-item>
					</el-menu-item-group>
				</el-submenu>
				<el-submenu index="2">
					<template slot="title"><i class="el-icon-menu"></i>商品管理</template>
					<el-menu-item-group>
						<el-menu-item index="2-1">商品分类</el-menu-item>
						<el-menu-item index="2-2">商品列表</el-menu-item>
					</el-menu-item-group>
				</el-submenu>
			</el-menu>
		</el-aside>
			
		<el-container>
			<el-header style="text-align: right; font-size: 12px">
				<el-dropdown>
					<i class="el-icon-setting" style="margin-right: 15px"></i>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item>用户中心</el-dropdown-item>
							<el-dropdown-item>退出登录</el-dropdown-item>
						</el-dropdown-menu>
				</el-dropdown>
				<span>admin</span>
			</el-header>
    
			<el-main>
				<router-view/>
			</el-main>
		</el-container>	
	</el-container>
  </div>
</template>

<script>

export default 
	name: "Main"


</script>

<style scoped>
  .el-header 
	background-color: #B3C0D1;
	color: #333;
	line-height: 60px;
  
  
  .el-aside 
    color: #333;
  
</style>

        上面的代码略多，主要是三个地方做了修改。第一，添加了基于容器的页面布局。这部分内容可以直接参考element ui给出的示例代码，地址在这，https://element.eleme.cn/#/zh-CN/component/container。第二，将之前el-main的内容修改为router-view，因为这部分的内容是由不同的子路由提供的，绝对不能写死。第三，通过router-link增加两个超链接，一个是/Member/Level，一个是/Member/List，这也是后面需要添加的子网页。

2、添加两个子网页MemberLevel.vue和MemberList.vue

2.1 MemberLevel.vue代码

<template>
	<div>会员等级</div>
</template>

<script>
export default 
	name:"MemberLevel"


</script>

<style>
</style>

2.2 MemberList.vue代码

<template>
	<div>会员列表</div>
</template>

<script>
export default 
	name:"MemberList"


</script>

<style>
</style>

        上面两个网页都是新增的，文件和Login.vue、Main.vue一样，保存在view目录下面即可。

3、修改路由文件router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Login from '@/view/Login'
import Main from '@/view/Main'
import MemberLevel from '@/view/MemberLevel'
import MemberList from '@/view/MemberList'

Vue.use(Router)

export default new Router(
  routes: [
    
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    ,
	
      path: '/Login',
      name: 'Login',
      component: Login
    ,
	
      path: '/Main',
      name: 'Main',
      component: Main,
	  children :[
		  
			  path: '/Member/Level',
			  name:'MemberLevel',
			  component: MemberLevel
		  ,
		  
			  path: '/Member/List',
			  name:'MemberList',
			  component: MemberList
		  
	  ]
    
  ]
)

        和前面几种路由不同，这里新增的路由是子路由，因此必须放在Main的children下面。具体的内容和外面一致，还是path、name、component这三种。

4、实验测试

        可以直接输入127.0.0.1:8082/Main，不出意外可以看到相关的网页。网页中的超链接也是可以打开的。