1、前端路由
在 Web 前端单页应用 SPA(Single Page Application)中，路由描述的是 URL 与 UI 之间的映射关
系，这种映射是单向的，即 URL 变化引起 UI 更新（无需刷新页面）。
vue-router 是 Vue.js 官方的路由插件，它和 vue.js 是深度集成的，适合用于构建单页面应用。
那与传统的页面跳转有什么区别呢？
- vue 的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。
- 传统的页面应用，是用一些超链接来实现页面切换和跳转的。
在 vue-router 单页面应用中，则是路径之间的切换，也就是组件的切换。路由模块的本质就是建立起 url 和页面之间的映射关系。
2、包含的功能
Vue Router 包含的功能有：
- 嵌套的路由/视图表
- 模块化的、基于组件的路由配置
- 路由参数、查询、通配符
- 基于 Vue.js 过渡系统的视图过渡效果
- 细粒度的导航控制
- 带有自动激活的 CSS class 的链接
- HTML5 历史模式或 hash 模式，在 IE9 中自动降级
- 自定义的滚动条行为
3、vue-router 实现原理
在 vue-router 中，可以通过三种方式来实现前端路由的变化，分别为 hash、history 和 abstract。
3.1 hash
hash 是 URL 中 hash (#) 及后面的那部分，常用作锚点在页面内进行导航，最重要的是改变 URL 中的 hash 部分不会引起页面刷新。
我们可以通过 hashchange 事件监听 URL 的变化，改变 URL 的方式只有这几种：
- 通过浏览器前进后退改变 URL
- 通过
<a>标签改变 URL - 通过
window.location改变 URL
我们通过下面的例子，来看下 hash 实现路由的原理：
<!DOCTYPE html>
<html lang="en">
<body>
<ul>
<ul>
<!-- 定义路由 -->
<li><a href="#/home">home</a></li>
<li><a href="#/about">about</a></li>
<!-- 渲染路由对应的 UI -->
<div id="routeView"></div>
</ul>
</ul>
</body>
<script>
let routerView = document.getElementById('routeView');
window.addEventListener('hashchange', () => {
routerView.innerHTML = location.hash;
});
window.addEventListener('DOMContentLoaded', () => {
if (!location.hash) {
//如果不存在hash值，那么重定向到#/
location.hash = '/';
} else {
//如果存在hash值，那就渲染对应UI
routerView.innerHTML = location.hash;
}
});
</script>
</html>
上面的代码很简单，只要注意一下几点：
- 我们通过 a 标签的 href 属性来改变 URL 的 hash 值。当然，触发浏览器的前进后退按钮也可以，或者在控制台输入 window.location 赋值来改变 hash 都是可以的。也都会触发 hashchange。
- 我们监听 hashchange 事件。一旦事件触发，就改变 routerView 的内容，若是在 vue 中，这改变的应当是 router-view 这个组件的内容。
- 为何又监听了 load 事件？这时因为页面第一次加载完不会触发 hashchange，因而用 load 事件来监听 hash 值，再将视图渲染成对应的内容。
3.2 history
由于 html5 标准的发布，history 的 api 增加了两个 API。pushState 和 replaceState。通过这两个 API 可以改变 url 地址且不会发送请求。同时还有 popstate 事件。通过这些就能用另一种方式来实现前端路由了，但原理都是跟 hash 实现相同的。
用了 HTML5 的实现，单页路由的 url 就不会多出一个#，变得更加美观。但因为没有 # 号，所以当用户刷新页面之类的操作时，浏览器还是会给服务器发送请求。为了避免出现这种情况，所以这个实现需要服务器的支持，需要把所有路由都重定向到根页面。
我们主要说几个注意点：
- 通过 pushState/replaceState 或
<a>标签改变 URL 不会触发页面刷新，也不会触发 popstate 方法。所以我们可以拦截 pushState/replaceState 的调用和<a>标签的点击事件来检测 URL 变化，从而触发 router-view 的视图更新。 - 通过浏览器前进后退改变 URL ，或者通过 js 调用 history 的 back，go，forward 方法，都会触发 popstate 事件，所以我们可以监听 popstate 来触发 router-view 的视图更新。
所以，我们其实是需要监听 popstate 以及拦截 pushState/placeState 以及 a 的点击去实现监听 URL 的变化。
我们通过下面的例子，来看下 history 实现路由的原理：
<!DOCTYPE html>
<html lang="en">
<body>
<ul>
<ul>
<li><a href="/home">home</a></li>
<li><a href="/about">about</a></li>
<div id="routeView"></div>
</ul>
</ul>
</body>
<script>
let routerView = document.getElementById('routeView');
window.addEventListener('DOMContentLoaded', () => {
routerView.innerHTML = location.pathname;
var linkList = document.querySelectorAll('a[href]');
linkList.forEach(el =>
el.addEventListener('click', function(e) {
e.preventDefault();
history.pushState(null, '', el.getAttribute('href'));
routerView.innerHTML = location.pathname;
}),
);
});
window.addEventListener('popstate', () => {
routerView.innerHTML = location.pathname;
});
</script>
</html>
注意一下几个重点：
- 我们监听 popState 事件。一旦事件触发（例如触发浏览器的前进后端按钮，或者在控制台输入 history，go，back，forward 赋值），就改变 routerView 的内容。
- 我们通过 a 标签的 href 属性来改变 URL 的 path 值。这里需要注意的就是，当改变 path 值时，默认会触发页面的跳转，所以需要拦截
<a>标签点击事件的默认行为，这样就阻止了 a 标签自动跳转的行为， 点击时使用 pushState 修改 URL 并更新手动 UI，从而实现点击链接更新 URL 和 UI 的效果。
3.3 abstract
abstract 是 vue 路由中的第三种模式，支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式。
4、使用 vue-router
首先，我们当然是通过 vue-cli 去创建一个脚手架，这一步比较简单，就直接省略了。然后，我们修改
App.vue：
<template>
<div id="app">
<div id="nav">
<router-link to="/home">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<router-view />
</div>
</template>
router/index.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';
Vue.use(VueRouter);
const routes = [
{
path: '/home',
name: 'Home',
component: Home,
},
{
path: '/about',
name: 'About',
component: About,
},
];
const router = new VueRouter({
mode: 'history',
routes,
});
export default router;
至于 home 组件和 about 组件，就是非常简单的一句话，就不放出来了。
到这里最基本的使用 vue-router 就完成了。
再将 VueRouter 引入改成我们的 myVueRouter.js
import VueRouter from './myVueRouter'; //修改代码
5、剖析 VueRouter 本质
我们在仔细看看 vue 是如何引入 vue-router 的。
- 首先，我们通过
import VueRouter from 'vue-router'引入 vue-router。 - 然后，通过
Vue.use(VueRouter)去触发了 vue-router 中的 install 方法。 - 最后，
const router = new VueRouter({...}), 再把 router 作为参数的一个属性值，new Vue({router})。
我们看看这三步，特别是最后一步我们是 new 出来的一个 vue-router 的实例，所以，我们可以预见，VueRouter 应该是一个类。所以我们这样写：
class VueRouter {}
然后通过 Vue.use() 我们知道，VueRouter 应该有个 install 方法，并且第一个参数应该是 Vue 实例。
let Vue = null;
class VueRouter {}
VueRouter.install = v => {
Vue = v;
};
// 然后导出
export default VueRouter;
5.1 加载组件
vue-router 还自带了两个组件，分别是 router-link 和 router-view
（1）router-link
组件支持用户在具有路由功能的应用中 (点击) 导航。 通过 to 属性指定目标地址，默认渲染成带有正确链接的 <a> 标签
使用 router-link 理由如下：
- 无论是 HTML5 history 模式还是 hash 模式，它的表现行为一致，所以，当你要切换路由模式，或者在 IE9 降级使用 hash 模式，无须作任何变动。
- 在 HTML5 history 模式下，router-link 会守卫点击事件，让浏览器不再重新加载页面。
- 当你在 HTML5 history 模式下使用 base 选项之后，所有的 to 属性都不需要写 (基路径) 了。
（2）router-view
组件是一个 functional 组件，渲染路径匹配到的视图组件。还可以内嵌自己，根据嵌套路径，渲染嵌套组件。
（3）加载 router-link 和 router-view：
let Vue = null;
class VueRouter {}
VueRouter.install = v => {
Vue = v;
// 新增代码
Vue.component('router-link', {
render(h) {
return h('a', {}, 'home');
},
});
Vue.component('router-view', {
render(h) {
return h('div', {}, 'home视图');
},
});
};
export default VueRouter;
这个时候，我们的脚手架应该可以跑起来了，并且显示 home 视图。
5.2 加载 $router
Vue.install 中除了加载 router-link 和 router-view 这两个组件以外，还有很重要的一个功能。那就是加载 $router 和 $route。
$route 和 $router 有什么区别？
$router 是 VueRouter 的实例对象，$route 是当前路由对象，也就是说 $route 是 $router 的一个属性。
其实 $router 中有一个 history 属性，它代表了 hashHistory 还是 HTML5history 实例对象，然后这个对象里面有个 current 属性，这个属性对象就是 $route。
通过 main.js 中的 new Vue({router})，我们可以把 router 实例（也就是刚刚 new 出来的）挂载到根组件的 $options 中。可是我们发现，我们在每个实例组件，都可以通过 this.$router 访问到 router 实例。而这个，就是在 install 中实现的。
// myVueRouter.js
let Vue = null;
class VueRouter {}
VueRouter.install = function(v) {
Vue = v;
// 新增代码
Vue.mixin({
beforeCreate() {
if (this.$options && this.$options.router) {
// 如果是根组件
this._root = this; //把当前实例挂载到_root上
this._router = this.$options.router;
} else {
//如果是子组件
this._root = this.$parent && this.$parent._root;
}
// 定义 $router
Object.defineProperty(this, '$router', {
get() {
return this._root._router;
},
});
},
});
Vue.component('router-link', {
render(h) {
return h('a', {}, '首页');
},
});
Vue.component('router-view', {
render(h) {
return h('h1', {}, '首页视图');
},
});
};
解释一下上面的代码：
- 首先，mixin 的作用是将 mixin 的内容混合到 Vue 的初始参数 options 中。
- 为什么是 beforeCreate 而不是 created 呢？因为如果是在 created 操作的话，$options 已经初始化好了。
- 在 beforeCreate 中，我们判断如果是根组件，我们将传入的实例和 router 分别绑定到 _root 和 _router 上。
- 如果是子组件，我们就去递归读取到根组件，绑定到 _root 上。
- 我们为 vue 的原型对象，定义 $router，然后返回值是 _root（根组件）的 _router。
那么，我们还有一个问题，为什么判断当前组件是子组件，就可以直接从父组件拿到 _root 根组件呢？
这就需要我们了解父子组件的渲染顺寻了，其实很简单，直接列出来了：
父 beforeCreate -> 父 created -> 父 beforeMounte ->
子 beforeCreate -> 子 create -> 子 beforeMount ->子 mounted ->
父 mounted
可以看到，在执行子组件的 beforeCreate 的时候，父组件已经执行完 beforeCreate 了，那理所当然父组件已经有 _root 了。
5.3 完善构造器
首先，我们看看，我们在 new VueRouter 的时候，传入了什么参数：
const router = new VueRouter({
mode: 'history',
routes,
});
可以看到，暂时传入了两个，一个是 mode，还有一个是 routes 数组。因此，我们可以这样实现构造器。
class VueRouter {
constructor(options) {
this.mode = options.mode || 'hash';
this.routes = options.routes || []; // 你传递的这个路由是一个数组表
}
}
由于直接处理数组比较不方便，所以我们做一次转换，采用 path 为 key，component 为 value 的方式。
class VueRouter {
constructor(options) {
this.mode = options.mode || 'hash';
this.routes = options.routes || [];
// 新增代码
this.routesMap = this.changeMap(this.routes);
}
// 新增代码
createMap(routes) {
return routes.reduce((pre, current) => {
pre[current.path] = current.component;
return pre;
}, {});
}
}
接下来，我们还需要在 vue-router 的实例中保存当前路径（在包含一些例如 params 信息，其实就是 $route），所以我们为了方便管理，使用一个对象来表示：
class HistoryRoute {
constructor() {
this.current = null;
}
}
class VueRouter {
constructor(options) {
this.mode = options.mode || 'hash';
this.routes = options.routes || [];
this.routesMap = this.changeMap(this.routes);
// 新增代码
this.history = new HistoryRoute();
}
createMap(routes) {
return routes.reduce((pre, current) => {
pre[current.path] = current.component;
return pre;
}, {});
}
}
这个时候，我们的 history 对象中，就保存了关于当前路径的属性 current。
只是，我们这个时候的 current 还是 null，所以，我们需要做初始化操作。
在初始化的时候，我们需要判断当前是什么模式，然后将当前路径保存到 current 中。
//myVueRouter.js
let Vue = null;
class HistoryRoute {
constructor() {
this.current = null;
}
}
class VueRouter {
constructor(options) {
this.mode = options.mode || 'hash';
this.routes = options.routes || [];
this.routesMap = this.createMap(this.routes);
this.history = new HistoryRoute();
// 新增代码;
this.init();
}
// 新增代码;
init() {
if (this.mode === 'hash') {
// 先判断用户打开时有没有 hash 值，没有的话跳转到 #/
location.hash ? '' : (location.hash = '/');
window.addEventListener('load', () => {
this.history.current = location.hash.slice(1);
});
window.addEventListener('hashchange', () => {
this.history.current = location.hash.slice(1);
});
} else {
location.pathname ? '' : (location.pathname = '/');
window.addEventListener('load', () => {
this.history.current = location.pathname;
});
window.addEventListener('popstate', () => {
this.history.current = location.pathname;
});
}
}
createMap(routes) {
return routes.reduce((pre, current) => {
pre[current.path] = current.component;
return pre;
}, {});
}
}
5.4 完善 $route
现在，我们已经在构造器中根据不同模式，将路径赋值给 history 的 current，那么，我们现在就可以给 $route 赋值了，当然 this.$route 也就是 current。
VueRouter.install = function(v) {
Vue = v;
Vue.mixin({
beforeCreate() {
if (this.$options && this.$options.router) {
// 如果是根组件
this._root = this; //把当前实例挂载到_root上
this._router = this.$options.router;
} else {
//如果是子组件
this._root = this.$parent && this.$parent._root;
}
Object.defineProperty(this, '$router', {
get() {
return this._root._router;
},
});
// 新增代码;
Object.defineProperty(this, '$route', {
get() {
return this._root._router.history.current;
},
});
},
});
Vue.component('router-link', {
render(h) {
return h('a', {}, '首页');
},
});
Vue.component('router-view', {
render(h) {
return h('h1', {}, '首页视图');
},
});
};
代码极其简单，就是在 vue 的原型链上再次定义了一个 $route，指向 current 即可。
5.5 完善 router-view
我们已经通过 current 保存到了当前的路径，那么我们现在就可以根据当前的路径，拿到对应的 component，然后，将这个 component 渲染出来就好了。
Vue.component('router-view', {
render(h) {
// 新增代码
let current = this._self._root._router.history.current;
let routeMap = this._self._root._router.routesMap;
return h(routeMap[current]);
},
});
但是这个时候，我们页面是渲染不出来的，原因在于，current 并不是响应式的，我们拿到的 current 是最初的，也就是 null。所以，我们需要把 current 变成响应式，只要路径变化，我们的 router-view 就必须跟着变化。
我们需要用到 Vue 中的一个工具方法，这个方法很简单，就是把变量变成响应式。那么在什么时候去把 current 变成响应式呢，其实很多地方都可以，例如在第一次定义 history 的时候，或者在根组件渲染出来 $router 的时候，我们就在第一次定义 history 的时候去改变。
constructor(options) {
this.mode = options.mode || 'hash';
this.routes = options.routes || [];
this.routesMap = this.changeMap(this.routes);
// this.history = new HistoryRoute();
// 新增代码
// 将history变成响应式的数据
Vue.util.defineReactive(this,"history",new HistoryRoute());
this.init();
};
5.6 完善 router-link
首先，我们应该比较清楚 router-link 的使用。
<router-link to="/home">Home</router-link>
<router-link to="/about">About</router-link>
很显然，父组件间 to 这个路径传进去，子组件接收。所以我们实现代码如下：
Vue.component('router-link', {
props: {
to: String,
},
render(h) {
// 新增代码
let mode = this._self._root._router.mode;
let to = mode === 'hash' ? '#' + this.to : this.to;
return h('a', { attrs: { href: to } }, this.$slots.default);
},
});
这个时候，我们把 router-link 渲染成了 a 标签，到这里，你们脚手架应该点击 router-link 就能切换相应的组件了。
Vue.mixin({
beforeCreate() {
if (this.$options && this.$options.router) {
// 如果是根组件
this._root = this; //把当前实例挂载到_root上
this._router = this.$options.router;
// 新增代码
// 拦截 router-link
this._router.mode === 'history' &&
document.addEventListener('click', e => {
if (e.target.className === 'router-link-to') {
// 阻止默认跳转事件;
e.preventDefault();
// 手动改变url路径
history.pushState(null, '', e.target.getAttribute('href'));
// 为current赋值url路径
this._router.history.current = location.pathname;
}
});
} else {
//如果是子组件
this._root = this.$parent && this.$parent._root;
}
},
});
上面代码拦截比较简单，解释一下：
- 判断如果是 router-link 的 a 标签，并且是 history 模式，那么就阻止默认跳转事件。
- 通过 history.pushState 方法去手动的改变 url 的路径，这个方法改变 url 不会刷新页面，这个很重要。
- 当然这样改变 url 也不会触发 popstate 方法，所以我们手动给 current 赋值。
- 因为我们的 history 已经是动态响应的了，所以很自然，这个时候 router-view 里面的组件也就更新了。
到此，我们对于 vue-router 的实现基本完成了，附上全部的 vue-router 的代码：
//myVueRouter.js
let Vue = null;
class HistoryRoute {
constructor() {
this.current = null;
}
}
class VueRouter {
constructor(options) {
this.mode = options.mode || "hash";
this.routes = options.routes || [];
this.routesMap = this.createMap(this.routes);
// this.history = new HistoryRoute();
Vue.util.defineReactive(this, "history", new HistoryRoute());
this.init();
}
createMap(routes) {
return routes.reduce((pre, current) => {
pre[current.path] = current.component;
return pre;
}, {});
}
init() {
if (this.mode === "hash") {
// 先判断用户打开时有没有 hash 值，没有的话跳转到 #/
location.hash ? "" : (location.hash = "/");
window.addEventListener("load", () => {
this.history.current = location.hash.slice(1);
});
window.addEventListener("hashchange", () => {
this.history.current = location.hash.slice(1);
});
} else {
location.pathname ? "" : (location.pathname = "/");
window.addEventListener("load", () => {
this.history.current = location.pathname;
});
window.addEventListener("popstate", () => {
this.history.current = location.pathname;
});
}
}
}
VueRouter.install = (v) => {
Vue = v;
Vue.mixin({
beforeCreate() {
if (this.$options && this.$options.router) {
this._root = this;
this._router = this.$options.router;
this._router.mode === "history" &&
document.addEventListener("click", (e) => {
if (e.target.className === "router-link-to") {
// 阻止默认跳转事件;
e.preventDefault();
// 手动改变url路径
history.pushState(null, "", e.target.getAttribute("href"));
// 为current赋值url路径
this._router.history.current = location.pathname;
}
});
} else {
this._root = this.$parent && this.$parent._root;
}
Object.defineProperty(this, "$router", {
get() {
return this._root._router;
},
});
Object.defineProperty(this, "$route", {
get() {
return this._root._router.history.current;
},
});
},
});
Vue.component("router-link", {
props: {
to: String,
},
render(h) {
let mode = this._self._root._router.mode;
let to = mode === "hash" ? "#" + this.to : this.to;
return h(
"a",
{ attrs: { href: to }, class: "router-link-to" },
this.$slots.default
);
},
});
Vue.component("router-view", {
render(h) {
let current = this._self._root._router.history.current;
let routeMap = this._self._root._router.routesMap;
return h(routeMap[current]);
},
});
};
export default VueRouter;
6、总结
在 main.js 中导入，使用 Vue.use() 方法注册组件，然后就会调用 install() 方法，并构造一个 VueRouter 实例导出。
在 install() 方法中：
- 注册了两个子组件：router-link 和 router-view；
- 调用 Vue.mixin() 方法混入 beforeCreate() 方法，然后判断是否为根组件，如果是则挂载 this 到 this._root 上并且挂 _router，否则将根组件挂载到子组件的 _root 上；
- 调用 Object.defineProperty 将 $router 和 $route 绑定到 Vue.prototype 上，
$router = this._root._router，$route = this._root._router.history.current。
- 在 VueRouter 实例中：
- 进入 constructor(options) 实例化并传入 options 参数，得到 this.mode 和 this.routes，再将 this.routes 数组进行 map 化处理；
- 然后调用 Vue.util.defineReactive 将 this.history 变成响应式，其值为 HistoryRoute 的实例，实例中定义了一个 this.current 变量；
- 再然后调用 init() 方法进行初始化，判断 this.mode 等于 hash 则监听 load 和 hashChange 事件，得到 location.hash 并赋值给 current，否则判断 this.mode 等于 history 则监听 load 和 popstate 事件，得到 loaction.pathname 并赋值给 current。
7、参考
https://juejin.cn/post/6854573222231605256
