青岛做网站皆赴青岛博/陕西seo主管

重生之我在学Vue–第5天 Vue 3 路由管理（Vue Router）

前言

在现代前端开发中，单页面应用（SPA）是非常流行的开发模式，而路由管理是 SPA 中的核心功能之一。Vue 提供了官方的路由管理工具——Vue Router，帮助我们轻松地实现页面导航、动态路由、嵌套路由等功能。

今天，我们将学习 Vue Router 的基础用法，并通过一个简单的项目实践来掌握以下内容：

1. 路由配置与导航。
2. 动态路由与嵌套路由。
3. 路由守卫与懒加载。

最后，我们会为项目添加路由支持，实现页面切换功能，比如任务列表页和任务详情页。

Vue3 官方中文文档传送点： 简介 | Vue.js

Vue3 的中文官方文档学习笔记很全还有练习场，推荐去官网学习

Vue前端成仙之路：Vue 前端成仙之路_野生的程序媛的博客-CSDN博客

GO后端成神之路：Go 后端成神之路_野生的程序媛的博客-CSDN博客

---

一、路由配置与导航

1.1 什么是 Vue Router？

Vue Router 是 Vue.js 的官方路由管理库，用于在单页面应用中实现页面导航。它通过监听 URL 的变化，动态加载对应的组件，从而实现页面的切换。

1.2 安装 Vue Router

在 Vue 3 中，可以通过以下命令安装 Vue Router：

npm install vue-router

1.3 基本路由配置

步骤

1. 创建路由配置文件 router/index.js。
2. 定义路由规则（routes），每个路由规则都需要指定路径（path）和对应的组件（component）。
3. 创建路由实例并将其添加到 Vue 应用中。

代码示例

文件结构：

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

router/index.js：

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import TaskList from '../views/TaskList.vue';
import TaskDetail from '../views/TaskDetail.vue';const routes = [{ path: '/', component: Home }, // 首页{ path: '/tasks', component: TaskList }, // 任务列表页{ path: '/tasks/:id', component: TaskDetail }, // 任务详情页，动态路由
];const router = createRouter({history: createWebHistory(),routes,
});export default router;

main.js：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router'; // 引入路由const app = createApp(App);
app.use(router); // 将路由添加到 Vue 应用
app.mount('#app');

---

1.4 路由导航

在模板中使用 <router-link> 实现页面跳转：

<template><div><nav><router-link to="/">首页</router-link><router-link to="/tasks">任务列表</router-link></nav><router-view></router-view></div>
</template>

• <router-link>：用于创建导航链接，to 属性指定目标路径。
• <router-view>：用于显示匹配的组件。

---

二、动态路由与嵌套路由

2.1 动态路由

动态路由允许我们在路径中使用动态参数，例如 /tasks/:id，其中 :id 是一个动态参数。

示例：任务详情页

路由配置：

{ path: '/tasks/:id', component: TaskDetail }

TaskDetail.vue：

<template><div><h1>任务详情</h1><p>任务 ID：{{ taskId }}</p></div>
</template><script>
import { useRoute } from 'vue-router';export default {setup() {const route = useRoute();const taskId = route.params.id; // 动态参数return { taskId };},
};
</script>

---

2.2 嵌套路由

嵌套路由允许我们在一个路由中嵌套子路由。例如，在任务列表页中，我们可以嵌套一个任务详情的子路由。

示例：嵌套任务详情

路由配置：

{path: '/tasks',component: TaskList,children: [{ path: ':id', component: TaskDetail }, // 嵌套路由],
}

TaskList.vue：

<template><div><h1>任务列表</h1><ul><li v-for="task in tasks" :key="task.id"><router-link :to="`/tasks/${task.id}`">{{ task.name }}</router-link></li></ul><router-view></router-view> <!-- 嵌套路由的视图 --></div>
</template><script>
export default {data() {return {tasks: [{ id: 1, name: '学习 Vue Router' },{ id: 2, name: '完成任务详情页' },],};},
};
</script>

---

三、路由守卫与懒加载

3.1 路由守卫

路由守卫可以在用户导航到某个页面之前，执行一些逻辑。例如，检查用户是否登录。

示例：全局路由守卫

在 router/index.js 中添加路由守卫：

router.beforeEach((to, from, next) => {const isAuthenticated = false; // 模拟未登录if (to.path === '/tasks' && !isAuthenticated) {alert('请先登录！');next('/'); // 跳转到首页} else {next(); // 继续导航}
});

---

3.2 路由懒加载

路由懒加载可以将组件按需加载，从而减少初始加载时间。

示例：懒加载任务详情页

const routes = [{ path: '/', component: () => import('../views/Home.vue') },{ path: '/tasks', component: () => import('../views/TaskList.vue') },{ path: '/tasks/:id', component: () => import('../views/TaskDetail.vue') },
];

---

四、任务实践

任务目标

1. 为项目添加路由支持，实现以下页面：
   • 首页（Home.vue）：显示欢迎信息。
   • 任务列表页（TaskList.vue）：显示任务列表。
   • 任务详情页（TaskDetail.vue）：显示任务详情。
2. 使用动态路由实现任务详情页。
3. 添加全局路由守卫，未登录时禁止访问任务列表页。

---

实现步骤

1. 创建页面组件

Home.vue：

<template><div><h1>欢迎来到任务管理系统</h1><p>请点击上方导航栏浏览任务。</p></div>
</template>

TaskList.vue：

<template><div><h1>任务列表</h1><ul><li v-for="task in tasks" :key="task.id"><router-link :to="`/tasks/${task.id}`">{{ task.name }}</router-link></li></ul></div>
</template><script>
export default {data() {return {tasks: [{ id: 1, name: '学习 Vue Router' },{ id: 2, name: '完成任务详情页' },],};},
};
</script>

TaskDetail.vue：

<template><div><h1>任务详情</h1><p>任务 ID：{{ taskId }}</p></div>
</template><script>
import { useRoute } from 'vue-router';export default {setup() {const route = useRoute();const taskId = route.params.id;return { taskId };},
};
</script>

---

2. 配置路由

按照 1.3 基本路由配置 的内容创建路由并添加到项目中。

---

3. 添加全局路由守卫

在 router/index.js 中添加路由守卫，禁止未登录用户访问任务列表页。

---

运行效果

1. 首页显示欢迎信息。
2. 点击导航栏进入任务列表页。
3. 在任务列表页点击某个任务，跳转到任务详情页。
4. 未登录时访问任务列表页会被拦截。

---

五、总结

通过今天的学习，我们掌握了 Vue Router 的核心功能，包括路由配置、动态路由、嵌套路由、路由守卫和懒加载。路由管理是单页面应用的重要组成部分，熟练掌握这些内容后，我们可以轻松实现复杂的页面导航逻辑。

置路由

按照 1.3 基本路由配置 的内容创建路由并添加到项目中。

---

3. 添加全局路由守卫

在 router/index.js 中添加路由守卫，禁止未登录用户访问任务列表页。

---

运行效果

1. 首页显示欢迎信息。
2. 点击导航栏进入任务列表页。
3. 在任务列表页点击某个任务，跳转到任务详情页。
4. 未登录时访问任务列表页会被拦截。

---

五、总结

通过今天的学习，我们掌握了 Vue Router 的核心功能，包括路由配置、动态路由、嵌套路由、路由守卫和懒加载。路由管理是单页面应用的重要组成部分，熟练掌握这些内容后，我们可以轻松实现复杂的页面导航逻辑。

下一步，我们将学习 Vue 的状态管理工具（如 Pinia 或 Vuex），进一步提升应用的开发效率！