Vue 跳转页面传参

初创建于: 2022-07-08 11:03

要在 vue 中跳转页面时传递参数, 首先需要引入 useRoute 与 useRouter:

import {useRouter, useRoute} from 'vue-router';
const route = useRoute();
const router = useRouter();

要从页面 A 跳转到页面 B, 并将参数 userName 传递给页面 B, 假设页面 A 的 name 是 PageA, 页面 B 的 name 是 PageB, 则在页面 A 中可以如下方法传递参数并跳转页面:

import {useRouter, useRoute} from 'vue-router';

const router = useRouter();
const userName = ref("Corona");

router.push({
	name: 'PageB',
	query: {
		userName: userName.value;
	}
});

在页面 B 中以如下方法获取传递的参数 :

import {useRouter, useRoute} from 'vue-router';
const route = useRoute();

const userName = route.query.userName;

页面 A 在跳转时传递的参数会在跳转后页面的地址栏中显示, 如果跳转时没有传递参数, 则在页面 B 中获取的 route.query.userName 会是 null.