路由传参 [ query 模式 ]

课程 : 《Vue3 新特性详解》

返回课程

很多时候，我们需要将给定匹配模式的路由映射到同一个组件。例如，我们可能有一个 User 组件，它应该对所有用户进行渲染，但用户 ID 不同。

在 Vue Router 中，我们可以在路径中使用一个动态字段来实现，我们称之为路径参数。

query 形式传参

query 形式传参非常方便，通过 ?键=值的方式传参，路由数据只需要配置 path 即可。

重要的组成部分

1 路由设置，如 : const routes = [ { path : '/User', component : ()=> import("./pages/User.vue") }, ]

2 通过 route-link 组件或者 js 传参 [ 编程式导航 ] 3 通过 $route 对象获取参数

steup 方式示例

1. 跳转语法及演示

route-link : <route-link to="/路由path?键=值&键=值..."> 或者 <router-link :to="{path:'/User', query:{键:值,键:值}}">

编程导航 : router.push({ path:"/User", query:{键:值, 键:"值"} }); 代码示例 :

<template>
	<div>
		<router-link to="/">首页</router-link>
		  
		<router-link to="/User?id=11&name=test">router-link 传参</router-link>
		  
		<span @click="gotoAbout">JS 跳转传参</span>
	</div>
	<div style="margin-top:15px;">
		<router-view></router-view>
	</div>
</template>
<script setup>
import { useRouter } from "vue-router";
const router = useRouter();
function gotoAbout(){
	router.push({
		path:"/User",
		query:{id:101, name:"hi.."}
	});
}
</script>
<style>
</style>

2. 页面接收参数

<template>
	<div>id : {{uid}} name : {{uname}}</div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import { useRoute }       from "vue-router";
const uid   = ref(0);
const uname = ref('lesscode');
const route = useRoute();
onMounted(()=>{
	let queryData = route.query;
	console.log(queryData);
	uid.value     = queryData.id;
	uname.value   = queryData.name;
});
</script>
<style>
</style>

非 setup 语法

在非 setup 环境可以直接使用 this.$router.push()实现跳转功能，使用 this.$route 实现参数的接收。

# 跳转
this.$router.push({
	path  : '/User',
	query : {id:11, name:"test"}
});

# 接收页面
let routeQuery = this.$route.query;