VUE3基礎教學：路由與導航

VUE3是目前最受歡迎的前端開發框架之一，它提供了一種簡單、靈活和高效的方式來建立現代化的 Web 應用程式。其中路由和導航是VUE3框架中的重要功能之一，透過它們，你可以輕鬆實現頁面之間的切換和管理。

本教學將介紹V​​UE3框架中路由和導航的基本概念和使用方法，幫助你快速上手VUE3的路由和導航功能。

1. 路由的基本概念

路由是指透過不同的URL存取不同的頁面的方式。在VUE3中，路由透過vue-router庫來實現。 vue-router提供了路由的定義和管理功能。

在使用vue-router之前，你需要先安裝並引進vue-router函式庫。安裝方法如下：

npm install vue-router

引入vue-router庫方法如下：

import { createRouter, createWebHashHistory } from 'vue-router'

其中，createRouter是用來建立路由的方法，createWebHashHistory是指定使用hash模式來進行路由。

在路由定義時，需要定義路由的path和component。 path是存取該路由的URL，component是對應的元件。

例如：

const routes = [
  {
    path: '/',
    component: Home
  },
  {
    path: '/about',
    component: About
  }
]

上述程式碼定義了兩個路由，一個是根路徑'/'，對應的元件是Home；另一個是'/about'，對應的元件是About 。

在建立路由實例時，需要將定義好的routes傳入，如下所示：

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

history指定了路由的模式，createWebHashHistory表示使用hash模式。其他模式還包括history模式和abstract模式。 routes是指路由配置數組。

2. 導覽的基本概念

在VUE3中，透過路由定義好URL和對應的元件後，就需要透過導航來實現頁面之間的切換和跳轉。

導航主要包含兩種方式：編程式導航和宣告式導航。

2.1 編程式導航

編程式導航指的是透過JavaScript程式碼來進行頁面的跳躍和切換。 Vue Router提供了一些方法來實現這種導航方式。

以下是一些常用的方法：

• router.push：用於跳到目標頁面，並新增一個新的記錄到路由歷史記錄。

router.push('/home')

• router.replace：用於跳到目標頁面，但不要新增一個新的記錄到路由歷史記錄。

router.replace('/home')

• router.go：用於在路由歷史記錄中前進或後退一個指定的步數，可以是正數或負數。

router.go(-1) //后退一步

2.2 宣告式導覽

宣告式導覽是指透過在範本中宣告的方式來進行頁面的切換和跳轉。在Vue Router中，可以使用router-link元件來實現聲明式導覽。

router-link元件可以渲染為a標籤，用於透過路由連結跳轉頁面。

例如：

<router-link to="/home">Home</router-link>

上述程式碼表示渲染一個鏈接，點擊該連結會跳到'/home'路徑。

同時，router-link元件也支援帶參數的路由，例如：

<router-link :to="{ path: '/user/'+userId }">User</router-link>

上述程式碼表示渲染一個鏈接，點擊該連結會跳到'/user/123'路徑，其中123是用戶自訂的參數。

3. 路由的高階概念

在VUE3中，除了基本的路由和導航功能之外，還有一些路由的高階概念，例如路由嵌套、命名路由、路由守衛等。

3.1 路由嵌套

路由嵌套是指將多個路由組合在一起，形成一個父子關係。在VUE3中，透過定義子路由來實現路由嵌套。

例如：

const routes = [
  {
    path: '/',
    component: Layout,
    children: [
      {
        path: '',
        component: Home
      },
      {
        path: 'about',
        component: About
      }
    ]
  }
]

在上述程式碼中，定義了一個名為Layout的父級路由，包含兩個子路由，分別是根路徑''和'/about'。子路由將會在父路由的中渲染。

3.2 命名路由

命名路由是指為路由定義一個名稱，方便在程式中的呼叫。在Vue Router中，可以透過name屬性來定義路由的名稱。

例如：

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/about',
    name: 'about',
    component: About
  }
]

上述程式碼中，給根路徑'/'和'/about'的路由分別起了名字home和about。

在編程式導航和宣告式導航時，則可以透過對應的路由名稱來實現頁面的跳躍和切換。

3.3 路由守衛

路由守衛是指在路由跳轉時，可以透過一些預設的鉤子函數來控制路由跳轉的過程，以實現一些特定的需求。在VUE3中，Vue Router提供了全域路由守衛和局部路由守衛兩種類型。

全域路由守衛是指對所有的路由進行統一的控制，一般用於一些全域的操作。全域路由守衛的鉤子函數包括：beforeEach、beforeResolve和afterEach。

局部路由守衛是指對某一路由或一組路由進行特定的控制，一般用於一些局部的操作。局部路由守衛的鉤子函數包括：beforeEnter、beforeRouteUpdate、beforeRouteLeave。

例如：

router.beforeEach((to, from, next) => {
  // 进行权限判断或其他操作
  next()
})

在上述程式碼中，透過beforeEach函數定義了一個全域路由守衛，to、from分別表示即將進入的路由和目前路由，next表示放行路由的函數，需要在守衛中呼叫next函數來執行路由跳轉操作。

4. 總結

本教學介紹了VUE3框架中路由和導航的基本概念和使用方法，以及一些進階概念。希望透過本教程，你可以掌握VUE3中路由和導航的基本使用方法，並且能夠在實際專案中應用到路由和導航功能。

以上是VUE3基礎教學：路由與導航的詳細內容。更多資訊請關注PHP中文網其他相關文章！