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') } ] //配置路由管理器（路由对象）,routes是【routes:routes】的简写，就是上面代码创建的路由映射对象 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 }"】，扫描多个程序集--> <!--Blazor和Vue设置路由映射的差异是比较大的，Vue集中到路由文件Router/index.js中设置，而Blazor则分散到各个组件中，并通过反射拿到程序集的所有路由映射数据--> <Router AppAssembly="@typeof(App).Assembly"> <!--Found指根据请求路径找到路由映射的组件后，执行RouteView，并传入路由数据。路由数据routeData包括组件、路由参数等信息。--> <!--RouteView组件指定路由出口所在的位置（母版页中的@Body占位符），并接收路由数据。Blazor页面可单独设置母版页，但如未设置，则使用DefaultLayout设置的默认母版页。--> <!--FocusOnNavigate设置导航到页面后，焦点设置到哪个页面元素上，如下例会将页面焦点移到h1元素上--> <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可以设置组件和路由的一对多关系，如下列中的请求路径"/"和"/index"都会导航到Index组件--> @page "/"
@page "/index" <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>
