Blazor和Vue对比学习（进阶.路由导航一）：基本使用

Blazor和Vue都是单文件组件SPA，路由的实现逻辑非常相似，页面路径的改变都是组件的切换，但因为各自语言的特性，在实现方式上有较大差异。

一、安装

1、Vue：Router是Vue的一个插件。如果使用Vite脚手架初始化项目，需要手动安装和配置Router插件。如果使用Vue脚手架初始化项目，可以在安装过程中，选择带Vue Router的模板，自动完成Router的安装和配置。Vue脚手架初始化项目的cli命令为【npm init vue@latest】。下面主要简单介绍一下，如何手动安装Router：

//①使用Vite初始化Vue项目，选择vue模板（不用TS，简单点）=================================================
npm init vite@latest
//②完成项目创建后，安装Router========================================================================
npm install vue-router@latest
//③在main.js入口文件中挂载Router插件=================================================================
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(router)
app.mount('#app')
//④在src目录下，新建router文件夹，然后在router目录下，创建路由文件index.js================================
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
const routes = [
  {
    path: '/',
    component: HomeView
  }
]
const router = createRouter({
  history: createWebHistory(),
  routes
})
export default router

2、Blazor：创建Blazor项目时，可以直接使用路由，不需要安装。

二、基本使用

1、Vue路由的基本使用：

①在main.js中配置路由映射，并创建和导出路由管理器。

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
//配置路由映射，是一个对象数组。每个路由都需要映射到一个组件，路由的常用属性为：
//①path属性为路由（小写，多单词时用“-”连接）；
//②name属性为路由别名，导航时即可以用path也可以用name；
//③component属性为组件；
//配置组件方式一（静态导入），先import组件文件的组件对象，然后将组件对象赋值给component属性
//配置组件方式二（动态导入），component属性值是一个Lambda表达式，使用import方法导入组件文件。
//使用动态导入，第一次进入页面时，才会加载，懒加载，推荐方式
const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    component: () => import('../views/AboutView.vue')
  }
]

//配置路由管理器（路由对象）
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes
})

//导出路由管理器
export default router

②在根组件App.vue中（也是母版页），使用router-view组件布局组件出口（显示组件的区块，相当于一个占位符），使用router-link组件进行导航。

<script setup>
import { RouterLink, RouterView } from 'vue-router'
</script>

<template>
  <header>
    <div class="wrapper">
      <nav>
        <!--使用 router-link 组件进行导航 -->
        <!--通过传递 `to` 来指定链接 -->
        <!--使用html的a标签也可以导航，但会刷新页面。RouterLink只会切换组件，但不会刷新页面 -->
        <RouterLink to="/">Home</RouterLink>
        <RouterLink to="/about">About</RouterLink>
      </nav>
    </div>
  </header>
  <!-- RouterView组件为路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <RouterView />
</template>

2、Blazor路由的基本使用：

①在根组件App.razor中，进行路由的各项配置。

<!--在Router组件相当于Vue中的路由管理器，通过它路由到指定组件-->
<!--由于Blazor的路由映射分散到组件中进行设置，所以Router要通过反射拿到所有路由映射，AppAssembly属性指定扫描哪些程序集。-->
<!--可以通过【AdditionalAssemblies="new[] { typeof(Component1).Assembly }"】，扫描多个程序集-->
<!--（Vue集中到路由文件Router/index.js中设置路由映射）-->
<Router AppAssembly="@typeof(App).Assembly">

    <!--Found指找到路由映射的组件后，执行RouteView，并传入路由数据。routeData包括路由参数等数据。-->
    <!--RouteView组件为路由出口，接收路由数据，并指定了默认的模板页。Blazor页面可单独设置母版页，但如未设置，则使用默认母版页。-->
    <!--FocusOnNavigate设置导航到页面后，焦点设置到哪个页面元素上-->
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
    </Found>

    <!--如果未找到路由映射的组件，指显示以下指定内容-->
    <NotFound>
        <PageTitle>Not found</PageTitle>
        <!--LayoutView渲染指定的母版页，标签的内容渲染到@Body占位符的页南位置-->
        <LayoutView Layout="@typeof(MainLayout)">
            <p role="alert">Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>

②在页面上，通过@page指令设置路由映射。@page实际上是特性，等价于@attribute [Route(Constants.CounterRoute)]。从中也可以看出，Router组件是通过反射拿到指定程序集的路由映射数据。

<!--Index.razor（本质上是组件）-->
@page "/"
<PageTitle>Index</PageTitle>
......

<!--Counter.razor页面（本质上是组件）-->
@page "/counter"
<PageTitle>Counter</PageTitle>
......

③在母版页上（默认为Share/MainLayout.razor），使用@Body指令布局组件出口（显示组件的区块，相当于一个占位符），使用Navlink进行导航

<!--母版页须派生自LayoutComponentBase-->
@inherits LayoutComponentBase

<PageTitle>MainLayout默认母版页</PageTitle>
<div>
    <div>
    <!--NavLink组件设置导般，除a标签的功能之外，还能够显示活动页-->
    <!--当前页为活动页时，才使用nav-link样式-->
    <!--Match属性指活动页的判断方式，All指路径与href值完全匹配时才是活动页，而Prefix指只有任一段前缀匹配，就是活动页 -->
        <div>
            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">Home</NavLink>
        </div>
        <div>
            <NavLink class="nav-link" href="counter" Match="NavLinkMatch.Prefix" target="_blank">Counter</NavLink>
    </div>
</div>
    <div>
    <!--路由出口的占位符，在这个位置显示切换的页面-->
    <main>@Body</main>
    </div>
</div>