首頁  >  文章  >  web前端  >  VUE3基礎教學:路由與導航

VUE3基礎教學:路由與導航

王林
王林原創
2023-06-16 09:49:592582瀏覽

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是指路由配置數組。

  1. 導覽的基本概念

在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是用戶自訂的參數。

  1. 路由的高階概念

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

3.1 路由嵌套

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

例如:

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

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

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函數來執行路由跳轉操作。

  1. 總結

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

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

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn