//①使用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

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

<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>

<!--在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>

<!--Index.razor（本质上是组件）。@page可以设置组件和路由的一对多关系，如下列中的请求路径"/"和"/index"都会导航到Index组件-->
@page "/"
@page "/index"
<PageTitle>Index</PageTitle>
......
<!--Counter.razor页面（本质上是组件）-->
@page "/counter"
<PageTitle>Counter</PageTitle>
......

<!--母版页须派生自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>