vue实现页面跳转和参数传递的两种方式

const router = new Router({
	routes: [{
		path: '/list',
		name: 'List',
		component: () => import('@/components/demo2/List.vue')
	},{
		path: '/detail',
		name: 'Detail',
		component: () => import('@/components/demo2/Detail.vue'),
		props: route => ({param: route.query.param})
	}]
})

<template>
	<div>
		<h1>列表页面</h1>
		<div>
			<el-button type="primary" @click="toDetail">点击跳转详情</el-button>
		</div>
	</div>
</template>
<script>
	export default {
		name: "List",
		data() {
			return {
				myId: "123"
			};
		},
		methods: {
			toDetail() {
				this.$router.push({
					name: 'Detail',
					query: {param: this.myId}
				})
			}
		}
	}
</script>

<template>
	<div>
		<h1>详情页面</h1>
		<div>
			<el-button type="primary" @click="toList">点击返回列表</el-button>
			<div>传递参数：{{myId}}</div>
		</div>
	</div>
</template>
<script>
	export default {
		name: "Detail",
		data() {
			return {
				myId : this.$route.query.param
			};
		},
		methods:{
			toList(){
				this.$router.push({
					name: 'List',
				})
			}
		}
	}
</script>

const router = new Router({
	routes: [{
		path: '/main',
		name: 'Main',
		component: () => import('@/components/demo1/Main.vue')
	}]
})

<template>
	<div>
		<h1>主页面</h1>
		<my-list v-if="show == 'list'" @toDetail="toDetail"></my-list>
		<my-detail v-if="show == 'detail'" @toList="toList" :myId="myId"></my-detail>
	</div>
</template>
<script>
	import MyList from "@/components/demo1/MyList"
	import MyDetail from "@/components/demo1/MyDetail"
	export default {
		name: "Main",
		components: {
			MyList,
			MyDetail
		},
		data() {
			return {
				show: "list",
				myId: ""
			};
		},
		methods:{
			toDetail(data){
				this.show = "detail"
				this.myId = data
			},
			toList(){
				this.show = "list"
			}
		}
	}
</script>

<template>
	<div>
		<h2>列表页面</h2>
		<div>
			<el-button type="primary" @click="toDetail">点击跳转详情</el-button>
		</div>
	</div>
</template>
<script>
	export default {
		name: "MyList",
		data() {
			return {
				myId: "123"
			};
		},
		methods: {
			toDetail(data) {
				this.$emit("toDetail",this.myId)
			}
		}
	}
</script>

<template>
	<div>
		<h2>详情页面</h2>
		<div>
			<el-button type="primary" @click="toList">点击返回列表</el-button>
			<div>传递参数：{{myId}}</div>
		</div>
	</div>
</template>
<script>
	export default {
		name: "MyDetail",
		props:['myId'],
		data() {
			return {
			};
		},
		methods:{
			toList(){
				this.$emit("toList")
			}
		}
	}
</script>