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

文章目录

[重生之我在学Vue--第5天 Vue 3 路由管理（Vue Router）](#重生之我在学Vue--第5天 Vue 3 路由管理（Vue Router）)
- 前言
- 一、路由配置与导航
- - [1.1 什么是 Vue Router？](#1.1 什么是 Vue Router？)
  - [1.2 安装 Vue Router](#1.2 安装 Vue Router)
  - [1.3 基本路由配置](#1.3 基本路由配置)
  - - 步骤
    - 代码示例
  - [1.4 路由导航](#1.4 路由导航)
- 二、动态路由与嵌套路由
- - [2.1 动态路由](#2.1 动态路由)
  - - 示例：任务详情页
  - [2.2 嵌套路由](#2.2 嵌套路由)
  - - 示例：嵌套任务详情
- 三、路由守卫与懒加载
- - [3.1 路由守卫](#3.1 路由守卫)
  - - 示例：全局路由守卫
  - [3.2 路由懒加载](#3.2 路由懒加载)
  - - 示例：懒加载任务详情页
- 四、任务实践
- - 任务目标
  - 实现步骤
  - - [1. 创建页面组件](#1. 创建页面组件)
    - [2. 配置路由](#2. 配置路由)
    - [3. 添加全局路由守卫](#3. 添加全局路由守卫)
  - 运行效果
- 五、总结
- - - [3. 添加全局路由守卫](#3. 添加全局路由守卫)
  - 运行效果
- 五、总结

前言

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

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

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

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

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：

bash 复制代码

npm install vue-router

1.3 基本路由配置

步骤

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

代码示例

文件结构：

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

router/index.js：

javascript 复制代码

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：

javascript 复制代码

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> 实现页面跳转：

vue 复制代码

<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 是一个动态参数。

示例：任务详情页

路由配置：

javascript 复制代码

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

TaskDetail.vue：

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 嵌套路由

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

示例：嵌套任务详情

路由配置：

javascript 复制代码

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

TaskList.vue：

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 中添加路由守卫：

javascript 复制代码

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

3.2 路由懒加载

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

示例：懒加载任务详情页

javascript 复制代码

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

四、任务实践

任务目标

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

实现步骤

1. 创建页面组件

Home.vue：

vue 复制代码

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

TaskList.vue：

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：

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 中添加路由守卫，禁止未登录用户访问任务列表页。

运行效果

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

五、总结

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

置路由

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

3. 添加全局路由守卫

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

运行效果

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

五、总结

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