首頁 web前端 Vue.js VUE3基礎教學:路由與導航

VUE3基礎教學:路由與導航

Jun 16, 2023 am 09:49 AM
vue 導航 路由

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'。子路由將會在父路由的中渲染。

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

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

<🎜>:泡泡膠模擬器無窮大 - 如何獲取和使用皇家鑰匙
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系統,解釋
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Mandragora:巫婆樹的耳語 - 如何解鎖抓鉤
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1665
14
CakePHP 教程
1424
52
Laravel 教程
1322
25
PHP教程
1270
29
C# 教程
1250
24
vue中怎麼用bootstrap vue中怎麼用bootstrap Apr 07, 2025 pm 11:33 PM

在 Vue.js 中使用 Bootstrap 分為五個步驟:安裝 Bootstrap。在 main.js 中導入 Bootstrap。直接在模板中使用 Bootstrap 組件。可選:自定義樣式。可選:使用插件。

vue怎麼給按鈕添加函數 vue怎麼給按鈕添加函數 Apr 08, 2025 am 08:51 AM

可以通過以下步驟為 Vue 按鈕添加函數:將 HTML 模板中的按鈕綁定到一個方法。在 Vue 實例中定義該方法並編寫函數邏輯。

vue中的watch怎麼用 vue中的watch怎麼用 Apr 07, 2025 pm 11:36 PM

Vue.js 中的 watch 選項允許開發者監聽特定數據的變化。當數據發生變化時,watch 會觸發一個回調函數,用於執行更新視圖或其他任務。其配置選項包括 immediate,用於指定是否立即執行回調,以及 deep,用於指定是否遞歸監聽對像或數組的更改。

vue返回上一頁的方法 vue返回上一頁的方法 Apr 07, 2025 pm 11:30 PM

Vue.js 返回上一頁有四種方法:$router.go(-1)$router.back()使用 &lt;router-link to=&quot;/&quot;&gt; 組件window.history.back(),方法選擇取決於場景。

vue多頁面開發是啥意思 vue多頁面開發是啥意思 Apr 07, 2025 pm 11:57 PM

Vue 多頁面開發是一種使用 Vue.js 框架構建應用程序的方法,其中應用程序被劃分為獨立的頁面:代碼維護性:將應用程序拆分為多個頁面可以使代碼更易於管理和維護。模塊化:每個頁面都可以作為獨立的模塊,便於重用和替換。路由簡單:頁面之間的導航可以通過簡單的路由配置來管理。 SEO 優化:每個頁面都有自己的 URL,這有助於搜索引擎優化。

React與Vue:Netflix使用哪個框架? React與Vue:Netflix使用哪個框架? Apr 14, 2025 am 12:19 AM

NetflixusesAcustomFrameworkcalled“ Gibbon” BuiltonReact,notReactorVuedIrectly.1)TeamSperience:selectBasedonFamiliarity.2)ProjectComplexity:vueforsimplerprojects:reactforforforproproject,reactforforforcompleplexones.3)cocatizationneedneeds:reactoffipicatizationneedneedneedneedneedneeds:reactoffersizationneedneedneedneedneeds:reactoffersizatization needefersmoreflexibleise.4)

vue.js怎麼引用js文件 vue.js怎麼引用js文件 Apr 07, 2025 pm 11:27 PM

在 Vue.js 中引用 JS 文件的方法有三種:直接使用 &lt;script&gt; 標籤指定路徑;利用 mounted() 生命週期鉤子動態導入;通過 Vuex 狀態管理庫進行導入。

vue遍歷怎麼用 vue遍歷怎麼用 Apr 07, 2025 pm 11:48 PM

Vue.js 遍歷數組和對像有三種常見方法:v-for 指令用於遍歷每個元素並渲染模板;v-bind 指令可與 v-for 一起使用,為每個元素動態設置屬性值;.map 方法可將數組元素轉換為新數組。

See all articles