Vue3+Vite实现动态路由的详细实例代码

下面我来详细讲解“Vue3+Vite实现动态路由的详细实例代码”的完整攻略。

1. Vite项目基础搭建

首先，我们需要创建并启动一个Vite项目。可以使用命令行工具在要创建项目的目录下执行以下命令：

npm init vite-app my-project
cd my-project
npm install
npm run dev

上述命令意义分别为：使用vite-app模板创建my-project项目，进入my-project目录，安装项目依赖，启动项目。

2. 创建动态路由页面

接下来，我们需要创建动态路由页面，这里以用户详情页为例。在src/views目录下创建UserDetail.vue组件文件。示例代码如下：

<template>
  <div>
    <h2>User Detail Page</h2>
    <p>ID: {{ id }}</p>
  </div>
</template>

<script>
export default {
  computed: {
    id() {
      return Number(this.$route.params.id); // 获取路由参数中的ID值
    }
  }
};
</script>

3. 配置动态路由

接下来，我们需要向路由表中添加动态路由。在src/router/index.js文件中添加如下代码：

import { createRouter, createWebHistory } from 'vue-router';

const routes = [
  {
    path: '/user/:id', // 动态路由
    name: 'UserDetail', // 名称
    component: () => import('../views/UserDetail.vue') // 组件
  }
];

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

export default router;

4. 创建链接

接下来，我们需要在应用中创建链接，以便触发动态路由。在App.vue文件中添加如下代码：

<template>
  <div id="app">
    <nav>
      <ul>
        <li><router-link to="/">Home</router-link></li>
        <li><router-link to="/about">About</router-link></li>
        <li><router-link :to="{ name: 'UserDetail', params: { id: 1 } }">User Detail</router-link></li> <!-- 动态路由链接 -->
      </ul>
    </nav>
    <router-view />
  </div>
</template>

5. 运行应用

在终端中执行npm run dev命令，启动应用。在浏览器中打开http://localhost:3000，可以看到应用界面。

点击User Detail链接，即可触发动态路由，进入到用户详情页。

示例1

参考第4步中的代码，我们可以使用$route对象中的params属性获取路由参数。在Vue组件的computed属性中加入如下代码，则可以直接通过this.id获取路由参数中的ID值。

computed: {
  id() {
    return Number(this.$route.params.id);
  }
}

示例2

如果需要动态加载组件，可以使用Vue的异步组件加载功能。在第3步中的routes对象中，我们可以使用import函数动态加载组件。示例代码如下：

const routes = [
  {
    path: '/user/:id',
    name: 'UserDetail',
    component: () => import('../views/UserDetail.vue') // 使用异步组件
  }
];

这样，在加载该路由时，组件会在需要时才被异步加载。