Blazor和Vue對比學習（進階.路由導航一）：基本使用

functionMC發表於2022-12-04
BlazorVue路由

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元件指定路由出口所在的位置（母版頁中的@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>

 

相關文章