vue3+vue-router+vite 实现动态路由

在现代前端开发中，Vue.js作为一个轻量级且灵活的框架，被广泛应用于各类项目中。使用Vue 3、Vue Router以及Vite搭建动态路由系统，是一个非常实用的技能。本文将详细介绍如何使用这三个工具实现动态路由，并提供代码示例以帮助理解。

1. 环境搭建

首先，我们需要一个Vue 3的项目。可以使用Vite工具快速创建一个新的Vue 3项目。打开终端，运行以下命令：

npm create vite@latest my-vue-app --template vue
cd my-vue-app
npm install

2. 安装Vue Router

我们需要为项目安装Vue Router，运行以下命令：

npm install vue-router

3. 配置Vue Router

在src目录下创建一个名为router.js的文件，以便配置路由。然后在这个文件里，我们需要导入createRouter和createWebHistory，并定义我们的路由。

// src/router.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from './views/Home.vue';
import DynamicPage from './views/DynamicPage.vue';

const routes = [
    {
        path: '/',
        component: Home
    },
    {
        path: '/dynamic/:id',
        component: DynamicPage
    }
];

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

export default router;

在这个路由配置中，我们定义了两个路由：一个是主页，另一个是动态路由。/dynamic/:id是一个动态路由，其中:id是一个参数，可以在访问时替换为任意值。

4. 创建视图组件

在src/views/目录下，创建Home.vue和DynamicPage.vue两个组件。

Home.vue：

<template>
  <div>
    <h1>首页</h1>
    <router-link to="/dynamic/1">查看动态页面 1</router-link>
    <router-link to="/dynamic/2">查看动态页面 2</router-link>
  </div>
</template>

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

DynamicPage.vue：

<template>
  <div>
    <h1>动态页面</h1>
    <p>当前页面ID: {{ id }}</p>
  </div>
</template>

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

export default {
  name: 'DynamicPage',
  setup() {
    const route = useRoute();
    const id = computed(() => route.params.id);

    return {
      id
    };
  }
};
</script>

DynamicPage.vue组件使用useRoute来获取当前路由的信息，动态显示访问的ID。

5. 在主文件中使用Router

接下来，我们需要在main.js中使用我们创建的路由：

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

createApp(App)
  .use(router)
  .mount('#app');

6. 最终效果

现在，您可以运行项目：

npm run dev

访问http://localhost:3000，点击链接，您将会看到动态路由工作正常，页面根据不同的ID动态加载。

7. 总结

通过以上步骤，我们成功地利用Vue 3、Vue Router和Vite搭建了一个支持动态路由的应用。动态路由在单页面应用中尤为重要，可以为用户提供更好的体验，通过路由参数实现页面的重用。希望本文能对您在使用Vue构建应用时有所帮助！如果您有任何问题，欢迎在评论区讨论。