Vue Router 是 Vue.js 官方提供的路由管理器，它使得單頁(yè)面應(yīng)用 (SPA) 的開發(fā)變得更加簡(jiǎn)單和高效。通過本文，你將了解到 Vue Router 的核心功能和使用方法，包括定義路由、動(dòng)態(tài)路由、導(dǎo)航守衛(wèi)和嵌套路由等。我們還會(huì)通過具體的代碼案例，讓你更好地理解和應(yīng)用這些知識(shí)。

安裝 Vue Router

首先，我們需要安裝 Vue Router。只需在項(xiàng)目中運(yùn)行以下命令：

npm install vue-router

定義路由

在 Vue 項(xiàng)目中，我們需要一個(gè)專門的文件來定義路由。例如，我們可以創(chuàng)建一個(gè) router.js 文件，并在其中定義應(yīng)用的路由。

// router.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'

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

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

export default router

在 Vue 應(yīng)用中使用路由

接下來，我們需要在 Vue 應(yīng)用中使用剛剛定義的路由。在 main.js 文件中導(dǎo)入并使用路由。

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)
app.use(router)
app.mount('#app')

創(chuàng)建路由組件

為了讓路由生效，我們還需要?jiǎng)?chuàng)建相應(yīng)的組件。例如，創(chuàng)建 Home.vue 和 About.vue 組件。

<!-- Home.vue -->
<template>
  <div>
    <h1>Home Page</h1>
    <p>Welcome to the home page!</p>
  </div>
</template>

<script>
export default {
  name: 'Home'
}
</script>

<!-- About.vue -->
<template>
  <div>
    <h1>About Page</h1>
    <p>This is the about page.</p>
  </div>
</template>

<script>
export default {
  name: 'About'
}
</script>

在模板中使用路由

在 App.vue 中，我們可以使用 <router-link> 來創(chuàng)建導(dǎo)航鏈接，并使用 <router-view> 來顯示匹配的組件。

<!-- App.vue -->
<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
    </nav>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
nav {
  display: flex;
  gap: 10px;
}
</style>

動(dòng)態(tài)路由和路由參數(shù)

Vue Router 支持動(dòng)態(tài)路由和路由參數(shù)，允許我們?cè)诼窂街惺褂脛?dòng)態(tài)部分。

定義動(dòng)態(tài)路由

在 router.js 中，我們可以定義帶參數(shù)的動(dòng)態(tài)路由。

// router.js
import User from './components/User.vue'

const routes = [
  // ...other routes
  { path: '/user/:id', component: User }
]

獲取路由參數(shù)

在 User.vue 組件中，我們可以通過 useRoute 鉤子獲取路由參數(shù)。

<!-- User.vue -->
<template>
  <div>
    <h1>User Page</h1>
    <p>User ID: {{ userId }}</p>
  </div>
</template>

<script>
import { useRoute } from 'vue-router'

export default {
  name: 'User',
  setup() {
    const route = useRoute()
    const userId = route.params.id

    return { userId }
  }
}
</script>

導(dǎo)航守衛(wèi)

導(dǎo)航守衛(wèi)允許我們?cè)诼酚汕袚Q前后執(zhí)行特定的代碼邏輯。

全局導(dǎo)航守衛(wèi)

在 router.js 中，我們可以設(shè)置全局導(dǎo)航守衛(wèi)。

// router.js
router.beforeEach((to, from, next) => {
  console.log('Navigating from', from.path, 'to', to.path)
  next() // 必須調(diào)用 next()，否則導(dǎo)航不會(huì)進(jìn)行
})

嵌套路由

Vue Router 支持嵌套路由，允許我們創(chuàng)建多層級(jí)的路由結(jié)構(gòu)。

定義嵌套路由

在 router.js 中，我們可以定義嵌套路由。

// router.js
import UserProfile from './components/UserProfile.vue'
import UserPosts from './components/UserPosts.vue'

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

使用嵌套路由

在 User.vue 中，我們可以使用 <router-view> 來顯示嵌套路由。

<!-- User.vue -->
<template>
  <div>
    <h1>User Page</h1>
    <p>User ID: {{ userId }}</p>
    <router-link :to="'/user/' + userId + '/profile'">Profile</router-link>
    <router-link :to="'/user/' + userId + '/posts'">Posts</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
import { useRoute } from 'vue-router'

export default {
  name: 'User',
  setup() {
    const route = useRoute()
    const userId = route.params.id

    return { userId }
  }
}
</script>

通過以上介紹，你可以初步了解 Vue Router 的一些關(guān)鍵知識(shí)點(diǎn)和使用方法。這些內(nèi)容能幫助你在 Vue.js 項(xiàng)目中實(shí)現(xiàn)復(fù)雜的路由導(dǎo)航邏輯。希望你在使用 Vue Router 時(shí)能夠得心應(yīng)手，暢行無阻！