vue3：router页面跳转，query、params传参方式总结

vue3.0中使用router跳转页面，记录总结。template中跳转方式，直接$router.push()即可<button @click="$router.push('mine')">跳转到个人中心</button>function跳转传递参数1：显示传参 get /mime?id=1// 传递<template><div class="home"

文章共1,048字 · 阅读需要大约4分钟

一键AI生成摘要，助你高效阅读

问答

sunly_

12310人浏览 · 2022-03-23 10:44:21

sunly_ · 2022-03-23 10:44:21 发布

vue3.0中使用router跳转页面，记录总结。

template中跳转方式，直接$router.push()即可

<button @click="$router.push('mine')">跳转到个人中心</button>

function跳转传递参数1：显示传参 get /mime?id=1

// 传递
<template>
	<div class="home">
		<button @click="goBack">跳转到个人中心</button>
	</div>
</template>
<script>
	import { useRouter } from 'vue-router'
	export default {
		setup() {
			const router = useRouter();
			let goBack = () =>{
				router.push({
					path:'/mine',
					query:{
						id:1
					}
				})
			}
			return {
				goBack
			};
		},
	};
</script>

// 接收
<script>
	import { useRoute } from 'vue-router';
	export default {
		setup(){
			const router = useRoute();
			console.log('id：'+router.query.id);
		}
	}
</script>

function跳转传递参数2：隐式传参 post

// 传递
<script>
	import { useRouter } from 'vue-router'
	export default {
		setup() {
			const router = useRouter();
			let goBack = () =>{
				router.push({
					name:'mine',
					params:{
						id:1
					}
				})
			}
			return {
				goBack
			};
		},
	};
</script>

// 接收
<script>
	import { useRoute } from 'vue-router';
	export default {
		setup(){
			const router = useRoute();
			console.log('id：'+router.params.id);
		}
	}
</script>