Vue(五)---分页组件---路由

一. 分页

下方操作将分页作为组件设置完之后就不需要重复写分页的代码了只需要作为组件调用分页通过数据互传即可完成分页操作

vue(四) 写了如何完成分页操作这一章将分页单独提取出来作为一个子组件使用将调用分页的认定为父组件分页认定为子组件运用子传父父传子来实现分页操作

通过父组件将分页需要的数据如: 总数默认每页多少条数据默认第几页传到分页内

分页页面接收到数据根据数据完成分页规划将点击页数以及下拉每页多少条数据两个方法传到父组件在父组件进行接收使用就完成了完整的分页操作

具体代码和注解如下:

1. 主页面(父页面):

<template>
	<!-- 数据 -->
	<el-table :data="empList" style="width: 100%" :row-class-name="tableRowClassName">
		<el-table-column prop="id" label="编号" width="180" />
		<el-table-column prop="stuname" label="名字" width="180" />
		<el-table-column prop="sex" label="性别" width="180" />
		<el-table-column prop="idcard" label="身份证号" />
		<el-table-column prop="birthday" label="出生日期" />
	</el-table>
	<!-- 分页  当前页视为父组件	使用父传子将分页需要的数据传输传到分页内
		:mypage="page" 将子组件需要的数据传过去(默认的第几页 默认的每页多少条 一共有多少条数据) 
		@getChildVal="getMyChil" 获取到子组件传过来的数据(两个方法: 选择页数 选择每页多少条数据)
	-->
	<my-fenye :mypage="page" @getChildVal="getMyChil"></my-fenye>
</template>

<script>
	// 引用 axios
	import axios from "axios"
	// 引用分页
	import fenye from './fenye.vue'
	export default {
		// 注册分页组件
		components: {
			"my-fenye": fenye
		},
		data() {
			return {
				empList: [], // 存放数据
				page: { // 设置一个对象 将子组件需要的数据以对象的形式传过去
					currentPage: 1, // 第几页
					pageSize: 3, // 每页多少条数据
					total: 10 // 一共多少条数据
				},
			}
		},
		methods: {
			getMyChil(obj) {
				//同时获取到子组件传过来的 选择的第几页 以及 当前页每页多少条
				this.page.currentPage = obj.currPage;
				this.page.pageSize = obj.pageSize;
				this.getEmp();
			},
			getEmp() {
				// http://http://localhost:9999/stu/SelectPage 这里访问的是我的后台 分页查询 的地址
				axios.get("http://localhost:9999/stu/SelectPage", {
					params: {
						// 将当前的页数 以及每页多少条数据 传输到后台 配合后台的分页进行操作
						pageSize: this.page.pageSize,
						currPage: this.page.currentPage
					}
				}).then(res => {
					console.log(res);
					let r = res.data.data; // 简化
					this.page.total = r.total; // 将后台获取到的数据总条数传输到这里 同时传到子组件分页
					this.empList = r.list; // 将后台查询到的全部数据传输到当前并保存显示到页面中
				}).catch(function() {
					console.log("失败!!!!!");
				})
			}
		},
		mounted() {
			// 启动项目 调用查询 查到默认的数据
			this.getEmp()
		}
	}
</script>

<style>
</style>

2. 分页页面(子页面):

<template>
	<!-- 分页  作为子组件被调用-->
	<div class="demo-pagination-block">
		<el-pagination :current-page="mypage.currentPage"
		:page-size="mypage.pageSize" :page-sizes="[3, 6, 9]"
		:background="background" layout="total, sizes, prev, pager, next, jumper" 
		:total="mypage.total"
		@size-change="handleSizeChange" 
		@current-change="handleCurrentChange" />
	</div>
</template>

<script>
	export default {
		props: ["mypage"], // 父组件传过来的子组件需要的数据 以对象的形式传过来的
		data() {

		},
		methods: {
			// 将两个函数设置为一个对象传到父组件里 
			// 选择下拉框时传输的
			handleSizeChange(val) {
				// val下拉框选择的页数 从当前子组件绑定一个事件 将值传给父组件
				console.log("下拉框:", val);
				this.$emit("getChildVal", {
					currPage: this.mypage.currentPage,
					pageSize: val
				});
			},
			// 选择页数时传输的
			handleCurrentChange(val) {
				// val 点击选择的页数	
				console.log("点击:", val)
				// 
				/**
				 * currPage:val 点击选择页数的时候传输选择的第几页
				 * pageSize:this.mypage.pageSize 选择页数的同时将目前是每页多少条也传到父组件
				 */
				this.$emit("getChildVal", {
					currPage: val,
					pageSize: this.mypage.pageSize
				});
			}
		}

	}
</script>

<style>
</style>

效果如下:

二. 设置默认访问页面

学习到这里我们应该知道访问vue http://localhost:8080/默认页面是这样的首先来说这个效果肯定不是我想要的所以设定一个默认的页面

redirect:'设置一个想要显示的地址(下面自己定义的path)'

三. 路由导航嵌套路由

1. 什么是嵌套路由?

嵌套路由的定义与正常路由的定义没有区别只是设置了一个主路由在路由里面家里一个 children的方法吧需要嵌套的路由写在其内即可

2. 嵌套路由的作用

嵌套路由一般用于设定主路由页面为导航在主页面内设置几个按钮点击每个按钮的时候显示不同的内容

3. 嵌套路由的使用

嵌套路由的使用也是很简单的只需要在vue页面内加一个<el-menu-item @click="?" ></el-menu-item > 方法即可具体如下

4. 设置路由

路由的设定在router 下面的 index.js在上一张也有具体写过

普通路由的定义:

嵌套路由的定义:

5. 嵌套路由的调用

我这里使用的是 ElementPulsUi 的模版

<template>
	<div class="common-layout">
		<el-container>
			<el-header>主题内容</el-header>
			<el-container class="layout-container-demo" style="height: 500px">
				<el-aside width="200px">
					<el-scrollbar>
						<el-menu :default-openeds="['1', '3']" >
							<el-sub-menu index="1">
								<template #title>
									<el-icon>
										<message />
									</el-icon>侧边栏
								</template>
									<!-- 使用嵌套路由	 -->
									<el-menu-item @click="changeMenu('/tab')" >信息</el-menu-item>
									<el-menu-item  @click="changeMenu('/stu')">DYS</el-menu-item>
							</el-sub-menu>
						</el-menu>
					</el-scrollbar>
				</el-aside>
				<el-container>
					<el-main>
						<!--  存放视图 -->
						<router-view/>
					</el-main>
					<el-footer>底部内容
					<img src="../assets/a.jpg" width="600" height="300"/>
					</el-footer>
				</el-container>
			</el-container>
		</el-container>
	</div>
</template>

<script>
	
	
	export default{
		methods:{
			changeMenu(url){
				this.$router.push(url)
			}
		}
		
		
		
	}
</script>

<style>
</style>