一. 前言

说到路由，大家都会第一时间想到上图生活中的路由器；可以看到路由器上有几个网线口，每个网线口连接着一台电脑；

我们可将路由器的网线口看作key值，连接的电脑看作value值，每一个key对应着一个value，这就是路由；路由就是一种对应关系；

而多个路由（route）是由路由器（router）管理的，这就是两者的关系；

生活中的路由器就是为了实现多台设备可以共同上网，那我们编程中的路由呢，其实它们都是符合以下两点：

• 路由就是一组key–valued的对应关系
• 多个路由需要经过路由器管理

上图就是前端编程路由跳转的规则，点击导航根据路径跳转到对应的组件；也是一种映射关系，多个路由的映射关系由前端路由器统一管理配置；

二. 对SPA应用的理解

编程中的路由是为了实现SPA（single page web application）应用（单页面应用）；

单页面应用就像vue和react只有一个html页面，页面和局部内容改变通过路由跳转完成；多页面应用就是多个html页面，经过点击链接跳转到对应的html页面；

对SPA（单页面应用）的理解：

• 单页面应用
• 整个应用只有一个完整的页面index.html
• 点击页面中的导航不会刷新页面，只会也页面局部更新
• 数据需要通过ajax请求获取

三. 后端路由和前端路由

前面说过关于路由的概念：

1. 一个路由就是一组映射关系；
2. Key为路径，value可能就是一个函数或者组件

官方是这样定义的：

Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。功能包括：嵌套路由映射，动态路由选择，模块化、基于组件的路由配置…

上面为什么说key路径对应的value有可能是一个函数，因为路由也 前端和后端之分；

后端路由：

• value是funtion，用于处理客户端提交的请求
• 服务器接受到一个请求时，根据请求路径找到匹配的函数来处理请求，返回响应数据

前端路由：

• value是component，用于显示页面内容
• 当浏览器路径发生变化时，对应的组件就会显示

四. 项目中路由基本使用

路由的基本使用，其实官方介绍的很详细；这里注意一下，vue2.x版本使用路由V3.x版本，vue3.x版本使用路由V4.x版本；

如果你在最初创建项目的时候，选择一起安装vue-router的话，项目代码也就配置好了，下面我们来手动安装配置一下；（以vue3项目为例）

首先，在项目中安装vue-router

其次，在src文件夹下面创建一个router文件夹，并在其下创建index.js

然后，在main.js里面注册路由

最后，在项目组件中添加 < router-view /> 视图

路由可以多层嵌套，这里就不多讲啦，具体可以查看官网中的 嵌套路由 的具体讲解；

五. 路由传参

• < router-link >标签传参

前面我写过专门的介绍，可点击 vue中路由传参方式之一（router-link 进行页面按钮式路由跳转传参） 查看；

• 编程式路由传参

前面我写过专门的介绍，可点击 vue中路由传参方式之二（this.$router.push进行编程式路由跳转传参） 查看；

六. 路由守卫

全局路由守卫

• beforeEach( (to,from,next) => {}) — 在初始化和路由切换之前调用
• afterEach((to,from) => {}) — 在初始化和路由切换之后调用

项目中可以利用beforeEach全局前置路由守卫来做权限路由访问

独享路由守卫

• beforeEnter(to, from，next) — 某个路由独享的，只有进去之前

组件路由守卫

• beforeRouteEnter(to,from,next)
• beforeRouteUpdate(to,from,next)
• beforeRouteLeave(to,from,next)

七. history模式和hash模式的区别

对于vue这类渐进式前端开发框架，为了构建 SPA（单页面应用），需要引入前端路由系统，这也就是 Vue-Router 存在的意义。前端路由的核心，就在于 —— 改变视图的同时不会向后端发出请求。

hash模式和history模式的不同：

• hash —— 即地址栏 URL 中的 # 符号（此 hash 不是密码学里的散列运算）。比如这个 URL：http://www.abc.com/#/hello，hash 的值为 #/hello。它的特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。
• hash 模式下，仅 hash 符号之前的内容会被包含在请求中，如 http://www.abc.com，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误。
• history —— 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定浏览器支持）这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求。
• history 模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致，如 http://www.abc.com/book/id。如果后端缺少对 /book/id 的路由处理，将返回 404 错误。Vue-Router 官网里如此描述：“不过这种模式要玩好，还需要后台配置支持……所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。”
• 因此可以说，hash 模式和 history 模式都属于浏览器自身的特性，Vue-Router 只是利用了这两个特性（通过调用浏览器提供的接口）来实现前端路由.

本文由 在线网速测试 整理编辑，转载请注明出处，原文链接：https://www.wangsu123.cn/news/19377.html。