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>
        
        
        
        <RouterLink to="/">HomeRouterLink>
        <RouterLink to="/about">AboutRouterLink>
      nav>
    div>
  header>
  
  
  <RouterView />
template>

 

 

2、Blazor路由的基本使用：

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

<Router AppAssembly="@typeof(App).Assembly">

    
    
    
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
    Found>
   
    
    <NotFound>
        <PageTitle>Not foundPageTitle>
        
        <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组件是通过反射拿到指定程序集的路由映射数据。

@page "/"
@page "/index"
<PageTitle>IndexPageTitle>
......


@page "/counter"
<PageTitle>CounterPageTitle>
......

 

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

@inherits LayoutComponentBase

<PageTitle>MainLayout默认母版页PageTitle>
<div>
    <div>
    
    
    
        <div>
            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">HomeNavLink>
        div>
        <div>
            <NavLink class="nav-link" href="counter" Match="NavLinkMatch.Prefix" target="_blank">CounterNavLink>
    div>
div>
    <div>
    
    <main>@Bodymain>
    div>
div>