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

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

什么是动态路由？

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

项目准备

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

<code>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>code>

</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. 创建输入表单以导航动态路由