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

Vue.js教学第十一章：VueRouter实战指南

news 来源：原创 2025/5/23 7:05:11

Vue Router 基础深度剖析：从入门到实践

摘要： Vue Router 作为 Vue.js 的官方路由管理器，在单页面应用（SPA）开发中发挥着至关重要的作用。本文从研究者的视角系统地介绍了 Vue Router 的作用、安装和配置步骤，深入探讨了如何定义路由规则，包括路径与组件的映射关系。同时，详细阐述了 router - link 和 router - view 的基本用法，并通过大量示例代码和表格展示如何实现页面之间的导航，旨在为 Vue 开发者提供一份全面、深入且实用的 Vue Router 学习指南，助力开发者高效构建复杂的 Vue 应用程序。

一、引言

在现代前端开发中，单页面应用（SPA）架构因其出色的用户体验和快速的页面切换而受到广泛青睐。Vue.js 作为一款渐进式 JavaScript 框架，Vue Router 为其提供了强大的路由管理功能。通过 Vue Router，开发者能够轻松地创建多页面的 SPA 应用，实现页面之间的无缝导航和动态内容切换。深入研究 Vue Router 的基础功能，对于掌握 Vue.js 应用的开发具有重要意义。

二、Vue Router 的作用

Vue Router 主要用于实现 Vue 应用中的页面导航和视图切换。它通过将 URL 映射到不同的组件，使应用能够根据用户访问的路径展示相应的页面内容。Vue Router 支持多种路由模式，如 history 模式和 hash 模式，能够满足不同场景下的开发需求。此外，它还提供了丰富的导航守卫功能，用于控制页面的访问权限和导航流程。

三、Vue Router 的安装

（一）通过 npm 安装

在项目根目录下运行以下命令：

npm install vue-router

（二）通过 CDN 引入

在 HTML 文件中添加以下脚本标签：

<script src="https://unpkg.com/vue-router@4.2.5/dist/vue-router.global.js"></script>

四、Vue Router 的配置步骤

（一）创建路由实例

1. 基本配置

import { createRouter, createWebHistory } from 'vue-router';const router = createRouter({history: createWebHistory(),routes: []
});

这里，我们通过 createRouter 函数创建了一个路由实例，并指定了 history 模式为 createWebHistory()。

（二）定义路由规则

路由规则用于将 URL 路径映射到相应的组件。路由规则的定义通常包含 path 和 component 两个属性。

1. 示例：定义简单路由规则

const routes = [{path: '/home',component: () => import('./views/Home.vue')},{path: '/about',component: () => import('./views/About.vue')}
];

在这个例子中，我们定义了两个路由规则，分别将 /home 路径映射到 Home.vue 组件，将 /about 路径映射到 About.vue 组件。

（三）挂载路由实例到 Vue 应用

在主应用文件中，将路由实例挂载到 Vue 应用上：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';const app = createApp(App);
app.use(router);
app.mount('#app');

五、router - link 的基本用法

router - link 是 Vue Router 提供的一个导航组件，用于实现页面之间的链接导航。它会渲染为一个 <a> 标签，并自动为当前激活的链接添加一个 active 类。

（一）基本属性

to ：指定链接的目标路径，可以是字符串或对象。

（二）示例：使用 router - link 进行页面导航

<template><div><router-link to="/home">首页</router-link><router-link to="/about">关于我们</router-link></div>
</template>

在这个示例中，我们使用 router - link 创建了两个导航链接，分别指向 /home 和 /about 路径。

（三）动态链接

可以通过绑定 to 属性来动态生成链接路径：

<template><div><router-link :to="{ path: '/user/' + userId }">用户详情</router-link></div>
</template><script>
export default {data() {return {userId: 123};}
}
</script>

这里，根据 userId 的值动态生成指向 /user/123 的链接。

六、router - view 的基本用法

router - view 是一个占位符组件，用于渲染匹配到的路由对应的组件内容。

（一）基本用法

<template><div><router-view></router-view></div>
</template>

当用户访问不同的路径时，router - view 会根据路由规则渲染相应的组件。

七、页面导航的实现示例

（一）多页面应用示例

1. 项目结构

src/
├── views/
│   ├── Home.vue
│   ├── About.vue
│   └── Contact.vue
├── router/
│   └── index.js
├── App.vue
└── main.js

2. 定义路由规则（router/index.js）

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';
import Contact from '../views/Contact.vue';const routes = [{