Blazor和Vue对比学习（进阶.路由导航四）：路由传参

客户端路由传参，主要通过两种方式：（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>

<template>
    <h1>这里是ParamSource页1</h1>
    <button @click="ToParamTarget">打开目标页并传递参数</button>
</template>


//ParamTarget.vue，目标页面，接收参数================================================================
<script setup>
//引入route对象，用于接收参数
//route.params接收路径参数，route.query接收查询参数
import { useRoute } from 'vue-router';
const route = useRoute();
</script>

<template>
    <h1>Source页传递过来的参数:{{route.params.id}}</h1>
</template>

 

  

 

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

<template>
    <li v-for="item in students" :key="item.id">
        <ui>id:{{item.id}},name:{{item.name}}</ui>
        <button @click="ToStudentDetail(item)" style="margin-left: 10px;">查看详情</button>
    </li>
</template>


//学生详情页，StudentDetail.vue，接收查询参数===========================================================
<script setup>
import { useRoute } from 'vue-router';
const route = useRoute();
</script>

<template>
    <h1>id:{{route.query.id}}</h1>
    <h1>name:{{route.query.name}}</h1>
    <h1>age:{{route.query.age}}</h1>
    <h1>sex:{{route.query.sex}}</h1>
</template>

 

  

 

三、Blazor中通过路径传递参数

1、从ParamSource.vue，导航到ParamTarget.vue，传递值参数

//源页面ParamSource.razor，设置导航，传递路径参数=====================================================
@page "/param-source"
@inject NavigationManager Navigation

<h3>ParamSource</h3>
<button @onclick="@(()=>ToParamTarget("functionMC"))">导航到ParamTarget并传递参数</button>

@code {
    //ToParamTarget方法中，通过Navigation.NavigateTo方法进行导航
    //路径参数，直接通过字符串拼接的方式，路由目标页面通过设置自动解析路径，提取参数
    private void ToParamTarget(string param)
    {
        Navigation.NavigateTo("/param-target/" + param);
    }
}


//目标页面ParamTarget.razor，接收参数==============================================================
@page "/param-target/{text}"
<h3>ParamTarget</h3>
<h3>@Text</h3>

@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 Navigation
<h3>Student</h3>
@foreach (var item in students)
{
    <li>
        <ui>Id:@(item.Id),Name:@(item.Name),Sex:@(item.Sex)</ui>
        <button @onclick="@(()=>ToStudentDetial(item))">查询详情</button>
    </li>
}

@code {
    //创建students集合（测试数据）
    private List<StudentModel> students = new List<StudentModel>
    {
        new StudentModel{ Id=1,Name="zs",Sex="男" },
        new StudentModel{ Id=2,Name="ls",Sex="女" },
        new StudentModel{ Id=3,Name="ww",Sex="男" }
    };
    //直接通过更编码拼接带查询参数的导航路径
    //传递视图层中遍历students集合的当前行
    private void ToStudentDetial(StudentModel item)
    {
        Navigation.NavigateTo($"/student-detail?id={item.Id}&name={item.Name}&sex={item.Sex}");
    }
}


//学生详情页，StudentDetail.razor，接收查询参数===========================================================
@page "/student-detail"

<h1>StudentDetail</h1>
<h3>编号:@Id</h3>
<h3>姓名:@Name</h3>
<h3>性别:@XinBie</h3>

@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、除了可以直接通过路径拼接查询参数外，NavigationMagager还提供了几个API，可以生成带查询参数的路径。

@inject NavigationManager Navigation

private void ToStudentDetial(StudentModel item)
{
    //生成一个字典集合，作为参数
    Dictionary<string, object> query = new Dictionary<string, object>();
    query.Add("id",item.Id);
    query.Add("name", item.Name);
    query.Add("sex", item.Sex);
    //Navigation.GetUriWithQueryParameters将路径和字典集合，生成一个字符串类型的查询路径，如【/student-detail?id=1&name=zs&sex=男】
    Navigation.NavigateTo(Navigation.GetUriWithQueryParameters("/student-detail",query)); 
}

（1）【Navigation.GetUriWithQueryParameter("{NAME}", {VALUE})】，生成路径为：/当前路径?Name=Value

（2）【Navigation.GetUriWithQueryParameters({PARAMETERS})】，PARAMETERS占位符为IReadOnlyDictionary<string, object>类型字典集合，生成路径为：/当前路径?key1=value1&key2=value2......

（3）【Navigation.GetUriWithQueryParameters("{URI}", {PARAMETERS})】，生成路径为：/URL?key1=value1&key2=value2......