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......

posted @   functionMC  阅读(637)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!
点击右上角即可分享
微信分享提示