(资料图片仅供参考)
客户端路由传参，主要通过两种方式：（1）路径参数(route)，如/student-detial/1，其中/student为路由，1为传递的参数；（2）查询参数(query)，如/student-detail?id=1&name=zs&age=18&sex=男。路径参数适合传递简单的值参数，查询参数适合传递复杂的对象参数。Vue中，使用router对象导航时，可以传递路径参数或查询参数，目标页面使用route对象接收参数。Blazor中，使用NavigationManager对象传递参数，目标页面使用[Parameter]和[SupplyParameterFromQuery]标注的属性接收参数。
一、Vue中通过 路径 传递参数（从ParamSource.vue，导航到ParamTarget.vue，传递值参数id）
//路由设置，Router/index.js====================================================================//***注意***：目标路由使用冒号占位符，【/param-target/:id】import { createRouter, createWebHistory } from "vue-router"const routes = [ ...... { path: "/param-source", name: "param-source", component: ()=> import("../views/ParamSource.vue"), }, { path: "/param-target/:id", name: "param-target", component: ()=> import("../views/ParamTarget.vue"), }]const router = createRouter({ history: createWebHistory(), routes})export default router//ParamSource.vue，源页面，设置导航和参数===========================================================<script setup>import { useRouter } from "vue-router";const router = useRouter();//调用router.push方法，参数为一个对象//***注意***：路由必须使用命名路由，如【name:"param-target"】//params属性，传递一个对象参数，对象中的属性id，名称与路由设置中的占位符一致【path: "/param-target/:id"】const ToParamTarget = ()=>{ router.push({ name:"param-target", params: { id: "123" } });}</script> 这里是ParamSource页1
//ParamTarget.vue，目标页面，接收参数================================================================<script setup>//引入route对象，用于接收参数//route.params接收路径参数，route.query接收查询参数import { useRoute } from "vue-router";const route = useRoute();</script> Source页传递过来的参数:{{route.params.id}}
二、Vue中通过 查询 传递参数（从Student.vue，导航到StudentDetail.vue详情页，传递值参数Student）
//路由配置，Router/index.js，不需要占位符，和普通路由一样================================================import { createRouter, createWebHistory } from "vue-router"const routes = [ ...... { path: "/student", name: "student", component: ()=> import("../views/Student.vue"), }, { path: "/student-detail", name: "student-detail", component: ()=> import("../views/StudentDetail.vue"), }]......//学生列表页，Student.vue，导航到详情页，并传入当前行的学生信息===========================================<script setup>import { ref } from "vue";import { useRouter } from "vue-router";const router = useRouter();//定义一个students数组对象（测试数据）const students = ref([ {id:1,name:"zs",age:18,sex:"男"}, {id:2,name:"ls",age:19,sex:"男"}, {id:3,name:"ww",age:20,sex:"女"}, {id:4,name:"zl",age:28,sex:"男"}, {id:5,name:"qq",age:35,sex:"女"}]);//使用router.push导航到student-detail，并通过查询参数传递复杂对象（当前行的学生对象）//item参数，由button按钮调用ToStudentDetail方法时传入，是遍历students数组对象的当前行const ToStudentDetail = (item)=>{ router.push({ path:"/student-detail", query:item });}</script> id:{{item.id}},name:{{item.name}} //学生详情页，StudentDetail.vue，接收查询参数===========================================================<script setup>import { useRoute } from "vue-router";const route = useRoute();</script> id:{{route.query.id}}
name:{{route.query.name}}
age:{{route.query.age}}
sex:{{route.query.sex}}
三、Blazor中通过路径传递参数
1、从ParamSource.vue，导航到ParamTarget.vue，传递值参数
//源页面ParamSource.razor，设置导航，传递路径参数=====================================================@page "/param-source"@inject NavigationManager NavigationParamSource
@code { //ToParamTarget方法中，通过Navigation.NavigateTo方法进行导航 //路径参数，直接通过字符串拼接的方式，路由目标页面通过设置自动解析路径，提取参数 private void ToParamTarget(string param) { Navigation.NavigateTo("/param-target/" + param); }}//目标页面ParamTarget.razor，接收参数==============================================================@page "/param-target/{text}"ParamTarget
@Text
@code { //指定[Parameter]标注的属性，接收路径参数，名称匹配，忽略大小写 [Parameter] public string? Text { get; set; }}
2、更加复杂的路径参数应用
//①复杂的路径参数传递============================================================================//导航传参private void ToParamTarget(string param1,string param2){ Navigation.NavigateTo("/param-target/" + param1 + "/page/" + param2);}//接收参数@page "/param-target/{text1}/page/{text2}"@code { [Parameter] public string? Text1 { get; set; } [Parameter] public string? Text2 { get; set; }}//②路径参数可以约束类型========================================================================//目前路径参数只能传递简单的值类型和字符串，以及这些简单参数的数组，如[1,2,3]//而路径参数约束，只支持简单的值类型，包括：float,double,decimal,int,long,guid,bool,datetime@page "/param-target/{Id:int}"@code { [Parameter] public int Id { get; set; }}//③路径参数可以设置默认值======================================================================//如果要在当前组件进行参数变化的跳转，如从【/param-target/1】跳转到【/param-target/2】//则默认值要在OnParametersSet生命周期函数上设置//因为虽然参数变化的跳转，并没有变化路由，还是在本组件内，所以OnInitialized不会调用@page "/param-target/{text?}"@code { [Parameter] public string? Text { get; set; } protected override void OnInitialized() { Text = Text ?? "fantastic"; }}//④使用*号获取所有路径参数=====================================================================//传递多个/路径private void ToParamTarget(){ Navigation.NavigateTo("/param-target/" + "/param1/" + "/param2/" + "/param3");}//接收【/param-target/】之后的所有/路径，使用*号@page "/param-target/{*text}"@code { [Parameter] public string? Text { get; set; }}四、Blazor中通过查询传递参数
1、从Student.vue，导航到StudentDetail.vue详情页，传递值参数Student
//学生列表页，Student.razor，导航到详情页，并传入当前行的学生信息===========================================@page "/student"@inject NavigationManager NavigationStudent
@foreach (var item in students){
StudentDetail
编号:@Id
姓名:@Name
性别:@XinBie
@code { //属性名和查询键名匹配，查询参数忽略大小写 [Parameter] [SupplyParameterFromQuery] public int Id { get; set; } //属性名和查询键名匹配，查询参数忽略大小写 [Parameter] [SupplyParameterFromQuery] public string? Name { get; set; } //通过特性参数的Name属性和查询键名匹配，查询参数忽略大小写 [Parameter] [SupplyParameterFromQuery(Name = "sex")] public string? XinBie { get; set; }}2、文档中有说明可以通过Navigation.GetUriWithQueryParameter传递查询参数，没看太懂，一直没成功。以下代码不能执行
private void ToStudentDetial(StudentModel item){ Dictionary query = new Dictionary(); query.Add("id",item.Id); query.Add("name", item.Name); query.Add("sex", item.Sex); Navigation.NavigateTo(Navigation.GetUriWithQueryParameter("/student-detail",query)); }
