切換語言為:簡體
Vue路由功能全解析

Vue路由功能全解析

  • 爱糖宝
  • 2024-07-14
  • 2080
  • 0
  • 0

想要學好vue,vue的路由功能是必不可少的,也是做單頁應用開發,必不可少的一環,那麼接下來我們就來看看vue的路由是怎麼一回事吧。

什麼是路由

路由可分為

  • 客戶端路由 (Client-side Routing)

    客戶端路由,也稱為單頁應用路由(SPA - Single Page Application routing),是在瀏覽器中管理應用程式內部不同檢視或頁面的過程。當用戶在應用內部導航時,客戶端路由會更新URL,並且只請求和渲染那些發生變化的部分,而不是重新載入整個頁面。

  • 服務端路由 (Server-side Routing)

    服務端路由則是在伺服器上處理URL請求的過程。當用戶訪問一個URL時,伺服器根據URL解析出對應的資源或業務邏輯,並返回相應的HTML頁面或API響應,每次頁面導航都會導致完整的頁面載入。。

在Vue.js中,路由指的是一個框架內用於處理URL和檢視之間的對映關係的系統,通常我們使用vue-router庫來實現這一功能。vue-router是Vue.js官方提供的路由管理器,它與Vue的核心深度整合,使得構建單頁面應用(SPA)變得更加容易。

路由的使用

如果你想為你的vue專案加入路由功能:

  1. 使用 JavaScript 包管理器安裝Vue Router, 輸入指令: npm install vue-router@4

或者你需要建立新專案,可以使用npm create vue@latest,他會建立一個基於vite的vue專案,它會提供Vue Router的選項,只需要在建立的時候新增就好了。

新增Vue Router選項的方式引入路由咱就不說了,讓我們自己來手動引入看看,該怎麼使用vue路由吧。

  • 首先在專案內下載vue-router庫,指令為:npm install vue-router@4

  • 在src目錄下建立router檔案,新增一個index.js的路由配置檔案,內容如下:

Vue路由功能全解析

可以配置很多個路由,其他的路由配置和這個路由的格式是一樣,我們只需要按照這樣配就好,它們也被稱為一級路由

也可以像下面這樣先引入,再賦值給component屬性。其他可以設定的路由選項我們會在之後介紹,目前我們只需要 path 和 component

import { createMemoryHistory, createRouter } from 'vue-router' 
import HomeView from './HomeView.vue' 
import AboutView from './AboutView.vue' 

const routes = [ { 
        path: '/', 
        component: HomeView 
    }, 
    { 
        path: '/about',
        component: AboutView 
    },
] 
const router = createRouter({   // 建立路由器例項是透過呼叫 `createRouter()` 函式建立的:
    history: createMemoryHistory(), 
    routes, 
})
  • 配置history時,通常,我們會使用 createWebHistory() 或 createWebHashHistory()

    • createWebHashHistory() 不需要伺服器端的特殊配置,但 URL 包含 #,可能不那麼美觀。

    • createWebHistory() 提供更乾淨的 URL 結構,但需要伺服器端的配合。

    總結

    1. createWebHashHistory是Vue Router 4中用於建立一個基於瀏覽器雜湊 (#) 的歷史記錄物件的方法。它利用瀏覽器的URL雜湊部分來儲存路由狀態,而不觸發完整的頁面過載。此方法特別適用於相容舊瀏覽器的單頁面應用(SPA),相容性較好。

    2. createWebHistory() 是 Vue Router 庫中的一個函式,用於建立一個基於 HTML5 歷史 API 的路由器例項,使用 createWebHistory() 的一個關鍵點是,伺服器必須正確配置,以處理所有路徑都指向同一個入口檔案(通常是 index.html)。這是因為,當用戶直接訪問或重新整理非根 URL 時,如果沒有正確的伺服器配置,可能會導致 404 錯誤。

我們在Vue Router中定義了path: '/home'這樣的路由規則時,意味著有一個特定的元件被關聯到了/home這個URL路徑。爲了讓這個元件的內容展示在頁面上,你需要在瀏覽器的位址列中輸入http://xxxxxx/home(其中xxxxxx是你的網站域名),或者在應用內部透過<router-link :to="{ path: '/home' }">this.$router.push('/home')等方式進行導航。

<template>
  <nav> 
    <RouterLink to="/">Go to Home</RouterLink> 
    <RouterLink to="/about">Go to About</RouterLink> 
  </nav> 

  <main> <RouterView /> </main>
</template>
  • 就像上面的這樣可以點選Go to About/home路徑下的特定元件將被顯示在<RouterView />,而RouterView又被稱為——路由入口。

    • <router-link>是Vue Router提供的一種特殊的Vue元件,用於在單頁應用中建立連結。它的工作方式類似於HTML中的<a>標籤,但是它在內部使用Vue Router的導航機制,而不是傳統的頁面跳轉,這意味著在點選連結時,頁面不會完全重新載入,而是隻更新與新路由關聯的部分檢視。

    • <router-view>是Vue Router中一個非常關鍵的元件,用於在應用程式中渲染與當前活動路由相匹配的元件。它是Vue Router的主要出口點,負責展示當前路由對應的檢視內容。

  • 這樣就可以使用路由功能嗎?其實這樣是不行,我們還需要在專案單點入口檔案內引入這個router,並使用。

Vue路由功能全解析

  • 啟動專案,你的一個簡單的路由使用就完成了。

路由傳引數

  • 應用場景:

    路由傳遞引數是一個很常見的場景,就像掘金的文章檢視一樣:

    Vue路由功能全解析

  • Vue路由功能全解析

    有一個文章id,然後透過id查詢該篇文章的資訊,進行展示,所有這個還是很常見的。

  • 傳參,首先需要了解程式設計式導航(下面是vue-router官方文件解釋)

    想要導航到不同的 URL,可以使用 router.push 方法。這個方法會向 history 棧新增一個新的記錄,所以,當用戶點選瀏覽器後退按鈕時,會回到之前的 URL。

    當你點選 <router-link> 時,內部會呼叫這個方法,所以點選 <router-link :to="..."> 相當於呼叫 router.push(...) :

  • 所以你用路由時攜帶引數可以這樣:

    Vue路由功能全解析

    Vue路由功能全解析


    不宣告 prop接收引數:

    Vue路由功能全解析

    爲了解除使用$route 或useRoute()會與路由耦合的限制,可以宣告 prop 接收引數:

    Vue路由功能全解析

0則評論

您的電子郵件等資訊不會被公開,以下所有項目均必填

OK! You can skip this field.