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>

6. 效果如下