vue页面跳转和参数传递

目标：两种方式，实现vue组件间跳转和参数传递

一、路由方式

页面跳转

• 当前组件使用$.router.push，通过参数name对应路由中目标组件的name实现跳转

参数传递

• 传值：当前组件使用$.router.push，通过参数query对应路由里目标组件props中的route.query
• 接参：目标组件script中使用$.router.query接收参数，页面中直接写参数名

（方法不唯一，还有其他方式）

1. 路由

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})
	}]
})

2. 列表页面

<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>

3. 详情页面

<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>

二、组件方式

只需配置一个路由即可实现不同页面跳转，页面跳转和参数传递通过组件间调用实现

页面跳转

• 父组件 → 子组件
  • ​​​​​​​引用子组件，利用v-if标签分别选择显示对应组件
• 子组件 → 父组件
  • ​​​​​​​子组件使用$.emit(事件)调用父组件方法改变自定义参数（show）实现跳转

参数传递

• 父组件 → 子组件
  • 传值：父组件引用子组件标签（<my-detail :id="父组件参数"></my-detail>）中传递参数
  • 接参：子组件接收参数使用props:['id']
• 子组件 → 父组件
  • 传值：子组件使用$.emit(父组件方法,参数)传递参数
  • 接参：父组件通过方法名(参数)接收

1. 路由

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

2. 主页组件

<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>

3. 列表子组件

<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>

4. 详情子组件

<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>

【源码见个人空间资源板块】

---

原创不易，转载请注明来源