引言

隨著單頁面應(yīng)用程序(SPA)的日益流行，前端開發(fā)逐漸向復(fù)雜且交互性強(qiáng)的方向發(fā)展。在這個(gè)過程中，Vue.js及其生態(tài)圈的工具（如Vue Router）為我們提供了強(qiáng)大的支持。本文將介紹如何在Vue 3中使用Vue Router實(shí)現(xiàn)動(dòng)態(tài)路由導(dǎo)航，幫助你增強(qiáng)應(yīng)用的靈活性和可擴(kuò)展性。

什么是動(dòng)態(tài)路由？

動(dòng)態(tài)路由是指在運(yùn)行時(shí)根據(jù)應(yīng)用的狀態(tài)或用戶的行為來生成或修改路由。它與靜態(tài)路由不同，靜態(tài)路由在應(yīng)用啟動(dòng)時(shí)就已經(jīng)被定義好，而動(dòng)態(tài)路由則允許應(yīng)用根據(jù)實(shí)際需求來控制導(dǎo)航。

項(xiàng)目準(zhǔn)備

在開始之前，我們需要搭建一個(gè)Vue 3的基本項(xiàng)目，首先，確保你已經(jīng)安裝Vue CLI。打開終端并使用以下命令創(chuàng)建新項(xiàng)目：

vue create dynamic-router-example

在交互式選擇中，確保選擇Vue 3選項(xiàng)。安裝完成后，進(jìn)入項(xiàng)目文件夾：

cd dynamic-router-example

然后安裝Vue Router：

vue add router

在提示中，選擇 “yes” 來使用歷史模式。你的項(xiàng)目現(xiàn)在已經(jīng)準(zhǔn)備就緒。

項(xiàng)目結(jié)構(gòu)

在項(xiàng)目的 src 文件夾中，可以看到main.js和router/index.js文件。接下來，我們將一些動(dòng)態(tài)路由和Vue組件添加到項(xiàng)目中。

實(shí)現(xiàn)動(dòng)態(tài)路由

我們將創(chuàng)建一個(gè)動(dòng)態(tài)路由示例，用戶可以輸入一個(gè)名稱，動(dòng)態(tài)地為該名稱創(chuàng)建路由。以下是實(shí)現(xiàn)的步驟。

1. 配置路由

在 src/router/index.js 中添加一個(gè)動(dòng)態(tài)路由配置：

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import DynamicRoute from '../views/DynamicRoute.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/user/:name', // 動(dòng)態(tài)路由
    name: 'User',
    component: DynamicRoute
  }
]

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

export default router

在這里，我們定義了一個(gè)動(dòng)態(tài)路由 '/user/:name'，name 是動(dòng)態(tài)的部分，將在后面根據(jù)用戶輸入動(dòng)態(tài)生成。

2. 創(chuàng)建動(dòng)態(tài)路由組件

接下來，創(chuàng)建一個(gè)新的組件 DynamicRoute.vue。在 src/views/ 目錄下創(chuàng)建這個(gè)文件，并添加以下代碼：

<template>
  <div>
    <h2>用戶頁面</h2>
    <p>歡迎，{{ username }}！</p>
    <router-link to="/">返回主頁</router-link>
  </div>
</template>

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

const route = useRoute()
 username = ref(route.params.name) // 獲取動(dòng)態(tài)參數(shù)
</script>

<style scoped>
h2 {
  color: #42b983;
}
</style>

在這個(gè)組件中，我們使用了 Composition API 的 setup 函數(shù)來獲取路由參數(shù)。useRoute 能夠使我們輕松訪問當(dāng)前路由的信息。

3. 創(chuàng)建輸入表單以導(dǎo)航動(dòng)態(tài)路由

接下來，我們將在 Home.vue 中添加一個(gè)表單，用戶可以通過這個(gè)表單輸入名稱以進(jìn)行導(dǎo)航。

編輯 src/views/Home.vue 文件，內(nèi)容如下：

<template>
  <div>
    <h1>主頁</h1>
    <form @submit.prevent="navigate">
      <label for="username">輸入用戶名:</label>
      <input type="text" v-model="name" id="username" required />
      <button type="submit">跳轉(zhuǎn)</button>
    </form>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const name = ref('')
const router = useRouter()

const navigate = () => {
  if(name.value) {
    router.push({ name: 'User', params: { name: name.value }})
  }
}
</script>

<style scoped>
h1 {
  color: #35495e;
}
form {
  margin-top: 20px;
}
</style>

在表單中，我們使用 v-model 將輸入框的值和組件的 name 變量進(jìn)行綁定。表單的 submit 事件會觸發(fā) navigate 方法，利用路由 push 方法來實(shí)際導(dǎo)航到動(dòng)態(tài)路由。

4. 完成代碼

現(xiàn)在，你的項(xiàng)目結(jié)構(gòu)和代碼應(yīng)該大致如下：

src/
├── main.js
├── router/
│   └── index.js
├── views/
│   ├── DynamicRoute.vue
│   └── Home.vue
└── App.vue

確保 App.vue 中包含 <router-view /> 來顯示我們定義的路由組件：

<template>
  <router-view />
</template>

測試應(yīng)用

在終端中運(yùn)行以下命令以啟動(dòng)應(yīng)用：

npm run serve

在瀏覽器中訪問 http://localhost:8080/，你應(yīng)該能夠看到主頁的輸入框。輸入用戶名后，點(diǎn)擊跳轉(zhuǎn)按鈕，應(yīng)用將動(dòng)態(tài)轉(zhuǎn)到對應(yīng)的用戶頁面，并展示對應(yīng)的用戶名。

總結(jié)

動(dòng)態(tài)路由在現(xiàn)代單頁面應(yīng)用中具有不可或缺的作用。通過這篇文章，我們展示了如何在Vue 3中利用Vue Router實(shí)現(xiàn)動(dòng)態(tài)路由導(dǎo)航。采用Composition API和Vue Router的結(jié)合，確保了代碼的簡潔和可擴(kuò)展性。

以上就是Vue3+Vue Router實(shí)現(xiàn)動(dòng)態(tài)路由導(dǎo)航的示例代碼的詳細(xì)內(nèi)容，更多關(guān)于Vue3 Vue Router動(dòng)態(tài)路由導(dǎo)航的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論