VueJS - 路由：Vue 應用程序導航新手指南

你好，未來的 Vue 大師們！今天，我們將踏上一段令人興奮的旅程，探索 Vue 路由的世界。將路由想像成你 Vue 應用程序的 GPS —— 它幫助用戶在不重新加載整個網站的情況下，從一個頁面導航到另一個頁面。酷炫吧？讓我們一起來看看！

Vue 路由是什麼？

想像你正在建造一個房子（你的 Vue 應用程序）。你肯定不會希望你的客人每次想進入不同的房間時，都從窗戶進去吧？這就是路由的作用 —— 它就像在你應用程序的房間之間創造正規的門戶。

Vue Router 是 Vue.js 的官方路由庫。它允許你將組件映射到不同的 URL 路徑，創造一個流暢的單頁應用程序體驗。

設置 Vue Router

首先，讓我們安裝 Vue Router。打開你的終端並運行以下命令：

npm install vue-router

現在，讓我們創建一個基本的路由設置：

// router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'

Vue.use(VueRouter)

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

const router = new VueRouter({
routes
})

export default router

在這個設置中，我們導入了 Vue 和 VueRouter，然後告訴 Vue 使用 VueRouter。我們在數組中定義了我們的路由，每個路由都是一個對象，指定了路徑、名稱和要渲染的組件。

使用 Router-Link 和 Router-View

現在，我們已經設置好了我們的路由，我們該如何使用它們呢？這就是 <router-link> 和 <router-view> 的用處。

Router-Link

<router-link> 是一個组件，它允許用戶在頁面之間導航。它就像是一個超級充電版的 <a> 標籤。以下是如何使用它的方法：

<template>
<div id="app">
<nav>
<router-link to="/">首頁</router-link> |
<router-link to="/about">關於我們</router-link>
</nav>
<router-view/>
</div>
</template>

Router-View

<router-view> 是魔法的發生地。它是一個组件，顯示與當前 URL 匹配的路由的內容。把它想像成一個佔位符，你的組件將在這裡被渲染。

Router-Link 的屬性

Router-Link 提供了多個屬性，讓你可以定制它的行為。讓我們看看一些最常見的：

屬性	描述	示例
to	指定目標路由	<router-link to="/about">關於我們</router-link>
replace	在不推送新的歷史條目的情況下導航	<router-link to="/about" replace>關於我們</router-link>
append	將路徑添加到當前路徑	<router-link to="child" append>子項</router-link>
tag	指定用什麼標籤渲染组件	<router-link to="/about" tag="li">關於我們</router-link>
active-class	链接激活時應用的類	<router-link to="/about" active-class="active">關於我們</router-link>
exact	完全匹配路由	<router-link to="/" exact>首頁</router-link>

編程式導航

有時候，你可能想從你的 JavaScript 代碼中導航。Vue Router 提供了以下方法：

// 導航到關於我們頁面
this.$router.push('/about')

// 返回上一頁
this.$router.go(-1)

// 替換當前歷史條目
this.$router.replace('/about')

動態路由匹配

我們經常需要映射具有相同组件但不同參數的路由。例如，用戶個人資料頁面，其中用戶 ID 是 URL 的一部分。我們可以使用路徑中的動態段來實現這一點：

const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User }
]
})

在這個例子中，:id 是動態段。你可以在你的组件中通過 this.$route.params.id 访問它。

嵌套路由

隨著你的應用程序增長，你可能想要在组件內部嵌套其他组件。Vue Router 讓這件事變得很容易：

const router = new VueRouter({
routes: [
{
path: '/user/:id',
component: User,
children: [
{
path: 'profile',
component: UserProfile
},
{
path: 'posts',
component: UserPosts
}
]
}
]
})

這個設置允許有像 /user/123/profile 和 /user/123/posts 這樣的 URL。

導航守衛

最後但同樣重要的是，讓我們來談談導航守衛。這些是 Vue Router 提供的钩子，用以在重定向或取消導航時保護導航。它們就像是你的應用程序的保鏢，控制誰能進入，誰不能進入。

以下是一個全局前置守衛的簡單示例：

router.beforeEach((to, from, next) => {
if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
else next()
})

這個守衛檢查用戶是否已經驗證，然後允許導航到除 'Login' 之外的路由。

好了，各位！我們已經走過了 Vue 路由的基本知識，從設置路由到保護它們。記住，熟練才能精通，所以不要害怕在你的項目中嘗試這些概念。開心地編程，願你的路由總是引導你走向你想去的地方！

Credits: Image by storyset