Vue.js教学第十一章：VueRouter实战指南
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.js2. 定义路由规则（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 = [{