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>

 

②在页面上,通过@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标签的功能之外,还能够显示活动页-->
    <!--当前页为活动页时,class属性会增加一个active样式标签,如Home为活动样式,class变为【class="nav-link active"】-->
    <!--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>

 

posted @ 2022-12-04 20:12  functionMC  阅读(928)  评论(0编辑  收藏  举报