說明：

           在用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"> &nbsp;&nbsp;返回</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">&nbsp;檢視</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">&nbsp;檢視</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、父元件到子元件，子元件生命週期方法不執行：最開始設想，父元件到子元件時，在子元件生命週期方法中判斷父元件傳的資料來控制部分檢視的顯隱。但是發現父元件到子元件過程中，子元件的生命週期不會被呼叫。查了資料，加上自己總結，才發現，父元件和子元件在一個頁面（不跳頁面時）子元件生命週期才會執行。要跳頁面的，子元件生命週期不會執行。

如果父元件想呼叫子元件方法：請看我另一篇博文：