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')
  }
]

//配置路由管理器（路由对象）,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组件接收路由数据，并指定默认母版页。页面可单独设置母版页，但如未设置，则使用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>

本站声明：
1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；

2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；

3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；

4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；

5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。