当前位置：首页 > news >正文

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

news 来源：原创 2025/5/19 20:17:00

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

文章目录

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

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：

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') },
];

四、任务实践

任务目标

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

实现步骤

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>