摘要：后端路由简介路由这个概念最先是后端出现的。前端路由模式随着的流行，异步数据请求交互运行在不刷新浏览器的情况下进行。通过这些就能用另一种方式来实现前端路由了，但原理都是跟实现相同的。
后端路由简介
路由这个概念最先是后端出现的。在以前用模板引擎开发页面时，经常会看到这样
http://www.xxx.com/login
大致流程可以看成这样：
浏览器发出请求
服务器监听到80端口（或443）有请求过来，并解析url路径
根据服务器的路由配置，返回相应信息（可以是 html 字串，也可以是 json 数据，图片等）
浏览器根据数据包的 Content-Type 来决定如何解析数据
简单来说路由就是用来跟后端服务器进行交互的一种方式，通过不同的路径，来请求不同的资源，请求不同的页面是路由的其中一种功能。
前端路由 1. hash 模式随着 ajax 的流行，异步数据请求交互运行在不刷新浏览器的情况下进行。而异步交互体验的更高级版本就是 SPA —— 单页应用。单页应用不仅仅是在页面交互是无刷新的，连页面跳转都是无刷新的，为了实现单页应用，所以就有了前端路由。
类似于服务端路由，前端路由实现起来其实也很简单，就是匹配不同的 url 路径，进行解析，然后动态的渲染出区域 html 内容。但是这样存在一个问题，就是 url 每次变化的时候，都会造成页面的刷新。那解决问题的思路便是在改变 url 的情况下，保证页面的不刷新。在 2014 年之前，大家是通过 hash 来实现路由，url hash 就是类似于：
http://www.xxx.com/#/login
这种 #。后面 hash 值的变化，并不会导致浏览器向服务器发出请求，浏览器不发出请求，也就不会刷新页面。另外每次 hash 值的变化，还会触发hashchange 这个事件，通过这个事件我们就可以知道 hash 值发生了哪些变化。然后我们便可以监听hashchange来实现更新页面部分内容的操作：
function matchAndUpdate () {
// todo 匹配 hash 做 dom 更新操作
}
window.addEventListener("hashchange", matchAndUpdate)
2. history 模式
14年后，因为HTML5标准发布。多了两个 API，pushState 和 replaceState，通过这两个 API 可以改变 url 地址且不会发送请求。同时还有 popstate 事件。通过这些就能用另一种方式来实现前端路由了，但原理都是跟 hash 实现相同的。用了 HTML5 的实现，单页路由的 url 就不会多出一个#，变得更加美观。但因为没有 # 号，所以当用户刷新页面之类的操作时，浏览器还是会给服务器发送请求。为了避免出现这种情况，所以这个实现需要服务器的支持，需要把所有路由都重定向到根页面。
function matchAndUpdate () {
// todo 匹配路径 做 dom 更新操作
}
window.addEventListener("popstate", matchAndUpdate)
Vue router 实现
我们来看一下vue-router是如何定义的：
import VueRouter from "vue-router"
Vue.use(VueRouter)
const router = new VueRouter({
mode: "history",
routes: [...]
})
new Vue({
router
...
})
可以看出来vue-router是通过 Vue.use的方法被注入进 Vue 实例中，在使用的时候我们需要全局用到 vue-router的router-view和router-link组件，以及this.$router/$route这样的实例对象。那么是如何实现这些操作的呢？下面我会分几个章节详细的带你进入vue-router的世界。(阅读源码是有点枯燥，但是带着问题去了解，就感觉很有意思。如果你对 vue-router 的实现机制也存在一些疑问，可以一起探讨交流)
vue-router 实现 -- install
vue-router 实现 -- new VueRouter(options)
vue-router 实现 -- HashHistory
未完待续...
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/107879.html
摘要：而路由则是使用了中新增的事件和事件。总结这一章主要是介绍了如何使用在中构建我们的前端路由。 系列目录地址 一、基础知识概览 第一章 - 一些基础概念（posted at 2018-10-31） 第二章 - 常见的指令的使用（posted at 2018-11-01） 第三章 - 事件修饰符的使用（posted at 2018-11-02） 第四章 - 页面元素样式的设定（posted a...
摘要：注意这个功能只在支持的浏览器中可用。官方文档简介滚动行为使用方法期望滚动到哪个的位置或者集成模式写法期望滚动到哪个的位置方法接收和路由对象。 前提：之前写过关于keep-Alive组件，来实现在列表页进入详情页后，后退，返回列表，显示上次访问的位置（原理就是缓存列表页数据来实现），目前发现另外一个问题，就是如果后台操作改变数据的状态，缓存的办法就会导致数据更新不及时导致一些页面错误（例...
前言 本文所有内容全部发布再个人博客主页 https://github.com/muwoo/blogs欢迎订阅。不过最近因为事情比较多，有一段时间没有更新了，后面打算继续不断学习更新，欢迎小伙伴一起沟通交流~ 最近更新 前端单测的那些事 基于virtual dom 的canvas渲染 js Event loop 机制简介 axios 核心源码实现原理 JS 数据类型、赋值、深拷贝和浅拷贝 j...
阅读 1506·2021-11-25 09:43
阅读 4056·2021-11-15 11:37
阅读 3190·2021-08-17 10:13
阅读 3502·2019-08-30 14:16
阅读 3532·2019-08-26 18:37
阅读 2487·2019-08-26 11:56
阅读 1128·2019-08-26 10:42
阅读 607·2019-08-26 10:39
