Blazor和Vue對比學習(進階.路由導航一):基本使用

functionMC 發表於 2022-12-04
Vue

Blazor和Vue都是單檔案元件SPA,路由的實現邏輯非常相似,頁面路徑的改變都是元件的切換,但因為各自語言的特性,在實現方式上有較大差異。

 

一、安裝

1、Vue:Router是Vue的一個外掛。如果使用Vite腳手架初始化專案,需要手動安裝和配置Router外掛。如果使用Vue腳手架初始化專案,可以在安裝過程中,選擇帶Vue Router的模板,自動完成Router的安裝和配置。Vue腳手架初始化專案的cli命令為【npm init [email protected]】。下面主要簡單介紹一下,如何手動安裝Router:

//①使用Vite初始化Vue專案,選擇vue模板(不用TS,簡單點)=================================================
npm init [email protected]
//②完成專案建立後,安裝Router========================================================================
npm install vue-[email protected]
//③在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元件指定路由出口所在的位置(母版頁中的@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>

 

②在頁面上,透過@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標籤的功能之外,還能夠顯示活動頁-->
    <!--當前頁為活動頁時,才使用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>