Vue3 + Vue Router实现动态路由导航

Vue 3 + Vue Router 实现动态路由导航

随着单页面应用程序(SPA)的日益流行，前端开发逐渐向复杂且交互性强的方向发展。在这个过程中，Vue.js及其生态圈的工具（如Vue Router）为我们提供了强大的支持。本文将介绍如何在Vue 3中使用Vue Router实现动态路由导航，帮助你增强应用的灵活性和可扩展性。

什么是动态路由？

动态路由是指在运行时根据应用的状态或用户的行为来生成或修改路由。它与静态路由不同，静态路由在应用启动时就已经被定义好，而动态路由则允许应用根据实际需求来控制导航。

项目准备

在开始之前，我们需要搭建一个Vue 3的基本项目，首先，确保你已经安装Vue CLI。打开终端并使用以下命令创建新项目：

vue create dynamic-router-example

在交互式选择中，确保选择Vue 3选项。安装完成后，进入项目文件夹：

cd dynamic-router-example

然后安装Vue Router：

vue add router

在提示中，选择 “yes” 来使用历史模式。你的项目现在已经准备就绪。

项目结构

在项目的 src 文件夹中，可以看到main.js和router/index.js文件。接下来，我们将一些动态路由和Vue组件添加到项目中。

实现动态路由

我们将创建一个动态路由示例，用户可以输入一个名称，动态地为该名称创建路由。以下是实现的步骤。

1. 配置路由

在 src/router/index.js 中添加一个动态路由配置：

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', // 动态路由
    name: 'User',
    component: DynamicRoute
  }
]

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

export default router

在这里，我们定义了一个动态路由 '/user/:name'，name 是动态的部分，将在后面根据用户输入动态生成。

2. 创建动态路由组件

接下来，创建一个新的组件 DynamicRoute.vue。在 src/views/ 目录下创建这个文件，并添加以下代码：

<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) // 获取动态参数
</script>

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

在这个组件中，我们使用了 Composition API 的 setup 函数来获取路由参数。useRoute 能够使我们轻松访问当前路由的信息。

3. 创建输入表单以导航动态路由

接下来，我们将在 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 事件会触发 navigate 方法，利用路由 push 方法来实际导航到动态路由。

4. 完成代码

现在，你的项目结构和代码应该大致如下：

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/，你应该能够看到主页的输入框。输入用户名后，点击跳转按钮，应用将动态转到对应的用户页面，并展示对应的用户名。

总结

动态路由在现代单页面应用中具有不可或缺的作用。通过这篇文章，我们展示了如何在Vue 3中利用Vue Router实现动态路由导航。采用Composition API和Vue Router的结合，确保了代码的简洁和可扩展性。

最后问候亲爱的朋友们，并邀请你们阅读我的全新著作

书籍详情