Blazor和Vue对比学习(进阶.路由导航三):代码导航
导航除了使用组件外(Blazor使用NavLink,Vue使用router-link或RouterLink),更多的时候,主要还是使用代码进行导航,更加灵活。Blazor提供了 NavigationManager对象,可以在代码层进行导航操作;而Vue提供了router和route对象。router对象为路由器,可用于导航;route对象为路由信息,可以获取参数等信息。
一、Blazor的代码导航,改造上一章节的Animal.razor页面,使用代码导航
@page "/animal" @layout MainLayout @inherits LayoutComponentBase <!--依赖注入NavigationManager对象,NavigationManager由框架自动注册--> @inject NavigationManager Navigation <PageTitle>动物</PageTitle> <h3>这里是动物页Animal.razor</h3> <!--按钮调用导航方法--> <button @onclick="NavigateToPandaDetail">熊猫详情</button> <button @onclick="NavigateToDogDetail">狗狗详情</button> <main> @Body </main> @code { <!--调用Navigation对象的NavigateTo方法,导航到animal/panda-detail--> private void NavigateToPandaDetail() { Navigation.NavigateTo("animal/panda-detail"); } <!--调用Navigation对象的NavigateTo方法,导航到animal/dog-detail--> private void NavigateToDogDetail() { Navigation.NavigateTo("animal/dog-detail"); } }
二、Vue导航,改造上一节的Animal.vue组件
<script setup> //引入router对象 import { useRouter } from 'vue-router'; const router = useRouter(); //字符串式导航 function LinkToPandaDetial(){ router.push("/panda-detail"); } //对象式导航且使用命名路由 function LinkToDogDetial(){ router.push({ name:"dog-detail" }); } /*对象式导航也可以使用路径,并传递参数
除了router.push方法外,router对象还有router.go(1),router.go(-1),router.back(1),向前和向后导航的方法 function LinkToPandaDetial(){ router.push({ name:"dog-detail", params: { username: 'eduardo' } }); } */ </script> <template> <h2>这里是关于动物页Animal.vue</h2> <header> <!-- 按钮调用导航方法 --> <button @click="LinkToPandaDetial">熊猫详情</button> <button @click="LinkToDogDetial">狗狗详情</button> </header> <main> <router-view></router-view> </main> </template>
三、浏览器history对象上储存着浏览历史,以上两例的默认导航方式,都会将浏览记录添加到history对象上,如果不想留下记录,可以使用replace
//Vue中使用replace================================================================= //组件导航 <router-link to="/panda-detail" replace></router-link> //代码导航 router.replace("/panda-detail"); //Blazer中使用replace============================================================== //组件导航。NavLink相对于a标签,除了有一个活动样式外,其它基本一样 <NavLink class="nav-link" href="animal/panda-detail" replace></NavLink> //代码导航① Navigation.NavigateTo("animal/panda-detail",replace:true); //代码导航②,使用NavigationOptions配置对象 Navigation.NavigateTo("animal/panda-detail", new NavigationOptions { ForceLoad = true, //默认为false,如为true,则页面会刷新,相当于重新加载页面,而不是在路由出口区域切换 ReplaceHistoryEntry = true, //默认为false,如为true,则不保留导航历史记录 //HistoryEntryState设置历史记录的键名 //HistoryEntryState = "导航到panda-detail" });
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!