vue 从页面中按钮事件跳转菜单中的页面，【父组件到子组件】【跳转新的页面】

朱雀 2022-04-17 04:43 542阅读 0赞

### 说明： ###

在用vue做项目时，有事需要跳转新的页面，有时候也需要复用已经写好的页面。

实际项目开发中： 在vue后台管理系统中，操作数据都要有一个记录。这些记录在任务管理界面可以查看，当在任务管理见面点击查看任务详情的时候，需要还原到当时操作数据时的情景，但是只需要显示数据展示的table。一切相关操作，比如搜索栏，删除数据，修改数据，添加数据等等都不显示。

**解决方案：**

1、第一个想法就是用路由，直接跳转过去，转个标志过去，就可以控制另一个页面相应控件显影隐

2、因为项目中没有用到路由，菜单存在数据库，从数据库查询出来，遍历渲染的。所以无法用路由。

因此改用父子组件的形式

3、不通过路由也可以跳转到菜单页。但此种方法没组件形式灵活，所以不在此做过多解释。

## ##

### 情景再现： ###

1、在例子中我们将用以下几个页面做演示。

（1）、用户界面

（2）、任务界面

（1）用户界面：userManager.vue

<template>
    	<div>
    		
    		<div v-if="!isShowUserData" class="margin15 margin-top10">
                <el-button type="warning" size="mini" icon="iconfont icon-iconfont0104" @click="goToTaskList">   返回</el-button>
            </div>
    		<div v-if="isShowUserData">
    			搜索区
    		</div>
    		<div class="white-bg margin auto">
    			<el-table>
    				数据表格展示区
    				<el-table-column prop="updTime" label="任务实际耗时(S)" width="180"  align="center"></el-table-column>
    				<el-table-column prop="status" label="任务状态" :formatter="getTaskStatus" width="100" align="center"></el-table-column>
    				<el-table-column label="操作" width="194" align="center">
                  	<template slot-scope="scope">
                  		<el-button type="text" size="small" @click="lookUserInfo(scope.row)" icon="iconfont icon-chakan color-bule"> 查看</el-button>         		     
                  	</template>
    			</el-table>
    		</div>
    	</div>
    </template>
    <script>
    	export default {
    	 	name:'userManager',
    		props: ['userData'],  //接收父组件的参数
    	 	data() {
    	 		return {
    				isShowUserData:true, //是否是从任务页面而来
    				table展示数据略
    			}
    		},
    		mounted: function () {
    			if(!this.userData.isShowUserData){
    				this.isShowUserData = this.userData.isShowUserData;
    			}
            },
    		methods: {
    			goToTaskList() {
    				//调父页面方法
    			    this.$emit('close');
    				//调父页面请求数据方法
    				this.$parent.getTableData();
    			}
    		}
    	}	
    </script>

(2)、任务管理界面：taskManager.vue

<template>
    	<div>
    		<div>
    			搜索区
    		</div>
    		<div class="white-bg margin auto">
    			<el-table>
    				数据表格展示区
    				....
    				<el-table-column prop="updTime" label="任务实际耗时(S)" width="180"  align="center"></el-table-column>
    				<el-table-column prop="status" label="任务状态" :formatter="getTaskStatus" width="100" align="center"></el-table-column>
    				<el-table-column label="操作" width="194" align="center">
                  	<template slot-scope="scope">
                  		<el-button type="text" size="small" @click="lookUserInfo(scope.row)" icon="iconfont icon-chakan color-bule"> 查看</el-button>         		     
                  	</template>
    			</el-table>
    		</div>
    		<user-manager  v-if="userShow" v-bind:userData = "userData" @close="showUserInfo" > </user-manager>	
    	</div>
    </template>
    <script>
    	//导入用户页面
    	import userManager from '../userManager.vue';
    	export default {
    	 	name:'taskManager',
    	 	components:{userManager},
    	 	data() {
    	 		return {
    				userData:{
    					userShow:false,
    					userList:[],
    					table展示数据略
    				}
    				
    			}
    		},
    		methods: {
    			lookTaskInfo(row) {
    				this.userShow = true;
    				this.userList = 查询出来的数据（或者是你想要传的数据）
    			},
    			//此方法，子组件会调用，调用返回父页面
    			showUserInfo() {
    				this.userShow = false;
    			},
    			//请求数据方法
    			getTableData() {
    				请求数据接口略
    			}
    		}
    	}	
    </script>

### 问题总结： ###

1、**父组件到子组件，子组件生命周期方法不执行：**最开始设想，父组件到子组件时，在子组件生命周期方法中判断父组件传的数据来控制部分视图的显隐。但是发现父组件到子组件过程中，子组件的生命周期不会被调用。查了资料，加上自己总结，才发现，父组件和子组件在一个页面（不跳页面时）子组件生命周期才会执行。要跳页面的，子组件生命周期不会执行。

如果父组件想调用子组件方法：请看我另一篇博文：