平时在Vue项目中经常用到路由，但是也仅仅处于会用的层面，很多基础知识并不是真正的理解。于是就趁着十一”小长假“查阅了很多资料，总结下路由相关的知识，查缺不漏，加深自己对路由的理解。
路由
在 Web 开发过程中，经常遇到
路由
的概念。那么到底什么是路由呢？简单来说，
路由就是 URL 到函数的映射。
路由这个概念本来是由后端提出来的，在以前用模板引擎开发页面的时候，是使用路由返回不同的页面，大致流程是这样的：
-
-
服务器监听到 80 或者 443 端口有请求过来，并解析 UR L路径；
-
服务端根据路由设置，查询相应的资源，可能是 html 文件，也可能是图片资源......，然后将这些资源处理并返回给浏览器；
-
浏览器接收到数据，通过
content-type
决定如何解析数据
简单来说，路由就是用来跟后端服务器交互的一种方式，通过不同的路径来请求不同的资源，请求
HTML
页面只是路由的其中一项功能。
服务端路由
当服务端接收到客户端发来的 HTTP 请求时，会根据请求的 URL，找到相应的映射函数，然后执行该函数，并将函数的返回值发送给客户端。
对于最简单的静态资源服务器，可以认为，所有 URL 的映射函数就是一个文件读取操作。对于动态资源，映射函数可能是一个数据库读取操作，也可能进行一些数据处理，等等。
客户端路由
服务端路由会造成服务器压力比较大，而且用户访问速度也比较慢。在这种情况下，出现了单页应用。
单页应用，就是只有一个页面，用户访问网址，服务器返回的页面始终只有一个，不管用户改变了浏览器地址栏的内容或者在页面发生了跳转，服务器不会重新返回新的页面，而是通过相应的js操作来实现页面的更改。
前端路由其实就是：
通过地址栏内容的改变，显示不同的页面
。
前端路由的优点：
-
前端路由可以让前端自己维护路由与页面展示的逻辑，每次页面改动不需要通知服务端。
-
前端路由的缺点：
使用浏览器的前进、后退键时会重新发送请求，来获取数据，没有合理利用缓存。
前端路由实现原理：
本质就是监测 URL 的变化，通过拦截 URL 然后解析匹配路由规则。
前端路由的实现方式
-
hash模式（location.hash + hashchange 事件）
hash 模式的实现方式就是通过监听 URL 中的 hash 部分的变化，触发
haschange
事件，页面做出不同的响应。但是 hash 模式下，URL 中会带有 #，不太美观。
-
history 路由模式的实现，基于 HTML5 提供的 History 全局对象，它的方法有：
-
history.go()
：在会话历史中向前或者向后移动指定页数
-
history.forward()
：在会话历史中向前移动一页，跟浏览器的前进按钮功能相同
-
history.back()
：在会话历史记录中向后移动一页，跟浏览器的后腿按钮功能相同
-
history.pushState()
：向当前浏览器会话的历史堆栈中添加一个状态，会改变当前页面url，但是不会伴随这刷新
-
history.replaceState()
：将当前的会话页面的url替换成指定的数据，replaceState 会改变当前页面的url，但也不会刷新页面
-
window.onpopstate
：当前活动历史记录条目更改时，将触发
popstate
事件
history路由的实现，主要是依靠
pushState
、
replaceState
和
window.onpopstate
实现的。但是有几点要注意：
-
当活动历史记录条目更改时，将触发 popstate 事件；
-
调用
history.pushState()
或
history.replaceState()
不会触发 popstate 事件
-
popstate 事件只会在浏览器某些行为下触发，比如：点击后退、前进按钮（或者在 JavaScript 中调用
history.back()
、
history.forward()
、
history.go()
方法）
-
对 pushState 和 replaceState 行为的监听
如果想监听 pushState 和 replaceState 行为，可以通过在方法里面主动去触发 popstate 事件，另一种是重写
history.pushState
，通过创建自己的
eventedPushState
自定义事件，并手动派发，实际使用过程中就可以监听了。具体做法如下：
function eventedPushState(state, title, url) {
var pushChangeEvent = new CustomEvent("onpushstate"
, {
detail: {
state,
title,
url
}
});
document.dispatchEvent(pushChangeEvent);
return history.pushState(state, title, url);
}
document.addEventListener(
"onpushstate",
function(event) {
console.log(event.detail);
},
false
);
eventedPushState({}, "", "new-slug");
router 和 route 的区别
route 就是一条路由，它将一个 URL 路径和一个函数进行映射。而 router 可以理解为一个容器，或者说一种机制，它管理了一组 route。
概括为：route 只是进行了 URL 和函数的映射，在当接收到一个 URL 后，需要去路由映射表中查找相应的函数，这个过程是由 router 来处理的。
动态路由和静态路由
静态路由只支持基于地址的全匹配。
动态路由除了可以兼容全匹配外还支持多种”高级匹配模式“，它的路径地址中含有路径参数，使得它可以按照给定的匹配模式将符合条件的一个或多个地址映射到同一个组件上。
动态路由一般结合角色权限控制使用。
动态路由的存储有两种方式：
-
-
动态路由的好处：
实现一个路由
一个简单的Router应该具备哪些功能
-
以 Vue为例，需要有
链接、
容器、
component
组件和
path
路由路径：
<div id="app">
<h1>Hello Worldh1>
<p>
<router-link to="/">Go to Homerouter-link>
<router-link to="/about">Go to Aboutrouter-link>
p>
<router-view>router-view>
div>
const routes = [{
path: '/',
component: Home
},
{
path: '/about',
component: About
}]
-
以React为例，需要有
容器、
路由、组件和链接：
<Routes>
<Route path="/" element={<App />}>
<Route index element={<Home />} />
<Route path="teams" element={<Teams />}>
<Route path=":teamId" element={<Team />} />
<Route path="new" element={<NewTeamForm />} />
<Route index element={<LeagueStandings />} />
Route>
Route>
Routes>
</BrowserRouter>
Home
-
综上，一个简单的 Router 应该具备以下功能：
不借助第三方工具库，如何实现路由
不借助第三方工具库实现路由，我们需要思考以下几个问题：
准备工作
1、
根据对前端路由 history 模式的理解，将大致过程用如下流程图表示：
2、如果不借助第三方库，我们选择使用
Web components
。Web Components由三项主要技术组成，它们可以一起使用来创建封装功能的定制元素。
-
Custom elements（自定义元素）
：一组JavaScript API，允许我们定义 custom elements及其行为，然后可以在界面按照需要使用它们。
-
Shadow DOM（影子DOM）
：一组JavaScript API，用于将封装的“影子”DOM树附加到元素（与主文档分开呈现）并控制关联的功能。通过这种方式，可以保持元素的功能私有。
-
HTML template（HTML模版）
：
和
可以编写不在页面显示的标记模板，然后它们可以作为自定义元素结构的基础被多次重用。
另外还需要注意 Web Components 的生命周期：
connectedCallback
：当 custom element 首次被插入文档DOM时，被调用
disconnectedCallback
：当 custom element 从文档DOM中删除时，被调用
adoptedCallback
：当custom element 被移动到新的文档时，被调用
attributeChangedCallback
：当 custom element 增加、删除、修改自身属性时，被调用
3、
Shadow DOM
-
open：shadow root 元素可以从 js 外部访问根节点
-
close ：拒绝从 js 外部访问关闭的 shadow root 节点
-
语法：
const shadow = this.attachShadow({mode:closed});
-
Shadow host：一个常规DOM节点，Shadow DOM 会被附加到这个节点上
-
Shadow tree：Shadow DOM 内部的 DOM 树
-
Shadow boundary：Shadow DOM 结束的地方，也是常规DOM开始的地方
-
Shadow root：Shadow tree 的根节点
-
-
通过自定义标签创建容器组件、路由、业务组件和链接组件标签，使用
CustomElementRegistry.define()
注册自定义元素。其中，Custom elements 的简单写法举例：
</my-text>
pushState 和 replaceState可以改变路由，改变历史记录，但是不能触发popstate事件，需要自定义事件并手动触发自定义事件，做出响应。
8. 组件功能拆解分析如下：
- 链接组件 — CustomLink(c-link)
当用户点击event.preventDefault();阻止页面默认跳转。根据当前标签的to属性获取路由，通过history.pushState("","",to)进行路由切换。
// 首页
class CustomLink extends HTMLElement {
connectedCallback() {
this.addEventListener("click", ev => {
ev.preventDefault();
const to = this.getAttribute("to");
// 更新浏览器历史记录
history.pushState("", "", to)
})
}
}
window.customElements.define("c-link", CustomLink);
- 容器组件 — CustomRouter(c-router)
主要是收集路由信息，监听路由信息的变化，然后加载对应的组件
- 路由 — CustomRoute(c-route)
主要是提供配置信息，对外提供getData 的方法
// 优先于c-router注册
//
class CustomRoute extends HTMLElement {
#data = null;
getData() {
return {
default: this.hasAttribute("default"),
path: this.getAttribute("path"),
component: this.getAttribute("component")
}
}
}
window.customElements.define("c-route", CustomRoute);
- 业务组件 — CustomComponent(c-component)
实现组件，动态加载远程的html，并解析
完整代码实现
index.html:
<div class="product-item">测试的产品div>
<div class="flex">
<ul class="menu-x">
<c-link to="/" class="c-link">首页c-link>
<c-link to="/about" class="c-link">关于c-link>
ul>
div>
<div>
<c-router>
<c-route path="/" component="home" default>c-route>
<c-route path="/detail/:id" component="detail">c-route>
<c-route path="/about" component="about">c-route>
c-router>
div>
<script src="./router.js">script>
home.html:
<template>
<div>商品清单div>
<div id="product-list">
<div>
<a data-id="10" class="product-item c-link">香蕉a>
div>
<div>
<a data-id="11" class="product-item c-link">苹果a>
div>
<div>
<a data-id="12" class="product-item c-link">葡萄a>
div>
div>
template>
<script>
let container = this.querySelector("#product-list");
// 触发历史更新
// 事件代理
container.addEventListener("click", function (ev) {
console.log("item clicked");
if (ev.target.classList.contains("product-item")) {
const id = +ev.target.dataset.id;
history.pushState({
id
}, "", `/detail/${id}`)
}
})
script>
<style>
.product-item {
cursor: pointer;
color: blue;
}
style>
detail.html:
<template
