引言

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

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

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

項目準備

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

vue create dynamic-router-example

在交互式選擇中，確保選擇Vue 3選項。安裝完成后，進入項目文件夾：

cd dynamic-router-example

然后安裝Vue Router：

vue add router

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

項目結構

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

實現(xiàn)動態(tài)路由

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

1. 配置路由

在 src/router/index.js 中添加一個動態(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', // 動態(tài)路由
    name: 'User',
    component: DynamicRoute
  }
]

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

export default router

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

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

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

<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) // 獲取動態(tài)參數(shù)
</script>

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

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

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

接下來，我們將在 Home.vue 中添加一個表單，用戶可以通過這個表單輸入名稱以進行導航。

編輯 src/views/Home.vue 文件，內容如下：

<template>
  <div>
    <h1>主頁</h1>
    <form @submit.prevent="navigate">
      <label for="username">輸入用戶名:</label>
      <input type="text" v-model="name" id="username" required />
      <button type="submit">跳轉</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 變量進行綁定。表單的 submit 事件會觸發(fā) navigate 方法，利用路由 push 方法來實際導航到動態(tài)路由。

4. 完成代碼

現(xiàn)在，你的項目結構和代碼應該大致如下：

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

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

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

測試應用

在終端中運行以下命令以啟動應用：

npm run serve

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

總結

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

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

最新評論