最新要闻

广告

手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

 警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

家电

  1. 首页
  2. 移动通信
  3. 内容

天天日报丨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>//ParamTarget.vue，目标页面，接收参数================================================================<script setup>//引入route对象，用于接收参数//route.params接收路径参数，route.query接收查询参数import { useRoute } from "vue-router";const route = useRoute();</script>

二、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>//学生详情页，StudentDetail.vue，接收查询参数===========================================================<script setup>import { useRoute } from "vue-router";const route = useRoute();</script>

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

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

//源页面ParamSource.razor，设置导航，传递路径参数=====================================================@page "/param-source"@inject NavigationManager Navigation
ParamSource
@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 Navigation
Student
@foreach (var item in students){    
  •         Id:@(item.Id),Name:@(item.Name),Sex:@(item.Sex)            
    • }@code {    //创建students集合（测试数据）    private List students = new List    {        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"
    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));        }

    关键词： 测试数据 参数传递