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')
  }
]

//設定路由管理器（路由物件）
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>