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"
});