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>

Blazor和Vue对比学习(进阶.路由导航一):基本使用的更多相关文章

  1. Blazor和Vue对比学习(进阶2.2.4):状态管理之持久化保存(2),Cookie/Session/jwt

    注:本节涉及到前后端,这个系列的对比学习,还是专注在前端Vue和Blazor技术,所以就不撸码了,下面主要学习概念. 我们知道,Http是无状态协议,客户端请求服务端,认证一次后,如果再次请求,又要重 ...

  2. Blazor和Vue对比学习:说在开始前

    1.Vue:现代前端三大框架之一(Vue/React/Angualr),基于HTML.CSS和JavaScript,2014年正式对外发布,目前已发展到3.X版本.值得说道的是,Vue的创始人作者是华 ...

  3. Blazor和Vue对比学习(基础1.4):事件和子传父

    Blazor和Vue的组件事件,都使用事件订阅者模式.相对于上一章的组件属性,需要多绕一个弯,无论Blazor还是Vue,都是入门的第一个难点.要突破这个难点,一是要熟悉事件订阅模式<其实不难& ...

  4. Blazor和Vue对比学习(进阶2.2.3):状态管理之状态共享,Blazor的依赖注入和第三方库Fluxor

    Blazor没有提供状态共享的方案,虽然依赖注入可以实现一个全局对象,这个对象可以拥有状态.计算属性.方法等特征,但并不具备响应式.比如,组件A和组件B,都注入了这个全局对象,并引用了全局对象上的数据 ...

  5. Blazor和Vue对比学习(进阶2.1.1):生命周期,基本理解和使用

    一.基本理解 首次接触"生命周期"这个名词,是比较晦涩的,Vue中又有生命周期钩子,而Blazor则是虚方法重写,容易蒙.所以,我尝试从初学者的角度来阐述一下. 1.我们在基础部分 ...

  6. Blazor和Vue对比学习(基础1.9):表单输入绑定和验证,VeeValidate和EditFrom

    这是基础部分的最后一章,内容比较简单,算是为基础部分来个HappyEnding.我们分三个部分来学习: 表单输入绑定 Vue的表单验证:VeeValidate Blazor的表单验证:EditForm ...

  7. Blazor和Vue对比学习(基础1.6):祖孙传值,联级和注入

    前面章节,我们实现了父子组件之间的数据传递.大多数时候,我们以组件形式来构建页面的区块,会涉及到组件嵌套的问题,一层套一层.这种情况,很大概率需要将祖先的数据,传递给子孙后代去使用.我们当然可以使用父 ...

  8. Blazor和Vue对比学习(基础1.8):Blazor中实现计算属性和数据监听

    1.7章<传递UI片断>,需要做几个案例,这部分暂停消化几天.我们先把基础部分相对简单的最后两章学习了. 计算属性和数据监听是Vue当中的概念,本质上都是监听数据的变化,然后做出响应.两者 ...

  9. Blazor和Vue对比学习(基础1.1):组件结构

    难度:★ 简单说一说: 1.Vue和Blazor都遵循单文件结果,即HTML(视图模板).CSS(样式).JS/C#(代码逻辑)写在一个文件里,Vue的文件后缀为.vue,Blazor的文件后缀为.r ...

  10. Blazor和Vue对比学习(基础1.2):模板语法和Razor语法

    Vue使用模板语法,Blazor使用祖传的Razor语法,从逻辑和方向上看,两者极为相似,比如: 都基于HTML 都通过声明式地将组件实例的状态(数据/方法)绑定到呈现的DOM上 都通过指令实现更加丰 ...

随机推荐

  1. Odoo自建应用初步总结(一)

    学习了<Odoo快速入门与实践 Python开发ERP指南>(刘金亮 2019年5月第1版 机械工业出版社)第6章自建应用入门后进行一下总结. 因为本书作者使用Odoo11,而目前最新版本 ...

  2. dotnet7 aot编译实战

    0 起因 这段日子看到dotnet7-rc1发布,我对NativeAot功能比较感兴趣,如果aot成功,这意味了我们的dotnet程序在防破解的上直接指数级提高.我随手使用asp.netcore-7. ...

  3. MySQL集群搭建(5)-MHA高可用架构

    1 概述 1.1 MHA 简介 MHA - Master High Availability 是由 Perl 实现的一款高可用程序,出现故障时,MHA 以最小的停机时间(通常10-30秒)执行 mas ...

  4. jenkins邮箱配置

  5. 10_SpringBoot更加详细

    一. 原理初探 1.1 自动装配 1.1.1 pom.xml spring-boot-dependencies: 核心依赖在父工程中 我们在写入或者引入一些SpringBoot依赖的时候, 不需要指定 ...

  6. influxDB2.2

    下载安装 下载地址 下载后在解压目录中,输入cmd执行exe文件 浏览器访问localhost:8086 选择快速开始,填写用户信息,组织信息 相关概念 InfluxDB是一个由InfluxData开 ...

  7. 洛谷P2602 [ZJOI2010] 数字计数 (数位DP)

    白嫖的一道省选题...... 1 #include<cstdio> 2 #include<cstring> 3 #include<algorithm> 4 usin ...

  8. leetcode刷题记录之25(集合实现)

    题目描述: 给你链表的头节点 head ,每 k 个节点一组进行翻转,请你返回修改后的链表. k 是一个正整数,它的值小于或等于链表的长度.如果节点总数不是 k 的整数倍,那么请将最后剩余的节点保持原 ...

  9. Selenium+Python系列 - 开发环境搭建

    一.写在前面 我从未想过自己会写python系列的自动化文章,有些同学会问,那你现在为什么又开始写了? 不止一个人找过我,问我可以写一些Python自动化的文章吗,答案是肯定的. 笔者Java党,整P ...

  10. 认识 Redis client-output-buffer-limit 参数与源码分析

    概述 Redis 的 client-output-buffer-limit 可以用来强制断开无法足够快从 redis 服务器端读取数据的客户端.保护机制规则如下: [hard limit] 大小限制, ...