简述
hash模式的特点：
hash模式在浏览器地址栏中url有#号这样的，比如http://localhost:3001/#/a. # 后面的内容不会传给服务端，也就是说不会重新刷新页面。并且路由切换的时候也不会重新加载页面。
history模式的特点：
浏览器地址没有#， 比如http://localhost:3001/a; 它也一样不会刷新页面的。但是url地址会改变。
实现简单的hash路由
实现hash路由需要满足如下基本条件：
- url中hash值的改变，并不会重新加载页面。
- hash值的改变会在浏览器的访问历史中增加一条记录，我们可以通过浏览器的后退，前进按钮控制hash值的切换。
- 我们可以通过 hashchange 事件，监听到hash值的变化，从而加载不同的页面显示。
触发hash值的变化有2种方法：
第一种是通过a标签，设置href属性，当点击a标签之后，地址栏会改变，同时会触发 hashchange 事件。比如如下a链接：
<a href="#/test1">测试hash1</a>
第二种是通过js直接赋值给location.hash，也会改变url，触发 hashchange 事件。
location.hash = '#/test1';
因此我们下面可以实现一个简单的demo，html代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hash路由demo</title>
</head>
<body>
<ul>
<li><a href="#/">我是主页</a></li>
<li><a href="#/a">我是a页面</a></li>
<li><a href="#/b">我是b页面</a></li>
</ul>
</body>
</html>
hash.js代码如下：
class HashRouter {
constructor() {
// 存储hash与callback键值对
this.routes = {};
// 保存当前的hash
this.currentHash = '';
// 绑定事件
const hashChangeUrl = this.hashChangeUrl.bind(this);
// 页面加载事件
window.addEventListener('load', hashChangeUrl, false);
// 监听hashchange事件
window.addEventListener('hashchange', hashChangeUrl, false);
}
// path路径和callback函数对应起来，并且使用 上面的this.routes存储起来
route(path, callback) {
this.routes[path] = callback || function() {};
}
hashChangeUrl() {
/*
获取当前的hash值
location.hash 获取的值为："#/a, 因此 location.hash.slice(1) = '/a' 这样的
*/
this.currentHash = location.hash.slice(1) || '/';
// 执行当前hash对应的callback函数
this.routes[this.currentHash]();
}
}
// 初始化
const Router = new HashRouter();
const body = document.querySelector('body');
const changeColor = function(color) {
body.style.backgroundColor = color;
};
// 注册函数
Router.route('/', () => {
changeColor('red');
});
Router.route('/a', () => {
changeColor('green');
});
Router.route('/b', () => {
changeColor('#CDDC39');
});
如上就是一个非常简化的hash路由了，首先我们代码也是非常的简化，首先如上js代码有一个route函数，该函数的作用就是初始化对应的路由和函数进行绑定起来，把他们保存到 this.routes 对象里面去，然后使用 hashchange 事件进行监听，如果触发了该事件，就找到该路由，然后触发对应的函数即可。我们点击某个a链接就会调用对应的函数，或者我们可以在控制台中使用 location.hash = '/b'; 来改变值也会触发的。
实现简单的history路由
直接上代码：
class HistoryRoutes {
constructor() {
// 保存对应键和函数
this.routes = {};
// 监听popstate事件
window.addEventListener('popstate', (e) => {
const path = this.getState();
this.routes[path] && this.routes[path]();
});
}
// 获取路由路径
getState() {
const path = window.location.pathname;
return path ? path : '/';
}
route(path, callback) {
this.routes[path] = callback || function() {};
}
init(path) {
history.replaceState(null, null, path);
this.routes[path] && this.routes[path]();
}
go(path) {
history.pushState(null, null, path);
this.routes[path] && this.routes[path]();
}
}
window.Router = new HistoryRoutes();
console.log(location.pathname);
Router.init(location.pathname);
const body = document.querySelector('body');
const changeColor = function(color) {
body.style.backgroundColor = color;
};
// 注册函数
Router.route('/', () => {
changeColor('red');
});
Router.route('/a', () => {
changeColor('green');
});
Router.route('/b', () => {
changeColor('#CDDC39');
});
const ul = document.querySelector('ul');
ul.addEventListener('click', e => {
console.log(e.target);
if (e.target.tagName === 'A') {
e.preventDefault();
Router.go(e.target.getAttribute('href'));
}
});
hash和history路由同时实现
项目目录结构如下：
|----项目demo
| |--- .babelrc # 解决es6语法问题
| |--- node_modules # 所有依赖的包
| |--- dist # 打包后的页面 访问该页面使用：http://0.0.0.0:7799/dist
| |--- js
| | |--- base.js
| | |--- hash.js
| | |--- history.js
| | |--- routerList.js
| | |--- index.js
| |--- package.json # 依赖的包文件
| |--- webpack.config.js # webpack打包文件
| |--- index.html # html 页面
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hash+history路由demo</title>
</head>
<body>
<div id="app"></div>
<ul class="list">
<li><a href="/">我是主页</a></li>
<li><a href="/hash">我是hash页面</a></li>
<li><a href="/history">我是history页面</a></li>
</ul>
</body>
</html>
js/base.js
const ELEMENT = document.querySelector('#app');
export class BaseRouter {
constructor(list) {
this.list = list;
}
render(state) {
let ele = this.list.find(ele => ele.path === state);
ele = ele ? ele : this.list.find(ele => ele.path === '*');
ELEMENT.innerText = ele.component;
}
}
如上代码 base.js 该类就一个构造函数，在 hash.js 或 history.js 会继承该类，因此hash或history类都有该render() 方法。该 render 方法作用就是找到对应的路径是否等于 routerlist 中的 path ，如果找到的话，就把对应的 component 里面的内容赋值给 id 为 app 的元素。
js/hash.js
import { BaseRouter } from './base.js';
// hash路由继承了BaseRouter
export class HashRouter extends BaseRouter {
constructor(list) {
super(list);
this.handler();
// 监听hash事件变化，并且重新渲染页面
window.addEventListener('hashchange', (e) => {
this.handler();
});
}
// 渲染
handler() {
const state = this.getState();
this.render(state);
}
// 获取当前的hash
getState() {
const hash = window.location.hash;
return hash ? hash.slice(1) : '/';
}
// 获取完整的url
getUrl(path) {
const href = window.location.href;
const index = href.indexOf('#');
const base = index > -1 ? href.slice(0, index) : href;
return `${base}#${path}`;
}
// hash值改变的话，实现压入
push(path) {
window.location.hash = path;
}
// 替换功能
replace(path) {
window.location.replace(this.getUrl(path));
}
// 模拟history.go 功能，实现前进/后退功能
go(n) {
window.history.go(n);
}
}
hash 代码如上；该类里面有 hashchange 事件监听hash值的变化，如果变化的话就会调用 handler 函数，在执行该函数中的render方法之前，会先调用 getState 方法，该方法目的是获取当前的hash。比如getState方法中使用 location.hash 获取的hash会是 '#/x' 这样的，然后会返回 '/x'。
getUrl() 方法是获取完整的url，可以看如上代码理解下即可，其他的就是 push,replace,go方法。
js/history.js
import { BaseRouter } from './base.js';
export class HistoryRouter extends BaseRouter {
constructor(list) {
super(list);
this.handler();
// 监听历史栈变化，变化时候重新渲染页面
window.addEventListener('popstate', (e) => {
this.handler();
});
}
// 渲染
handler() {
const state = this.getState();
this.render(state);
}
// 获取路由路径
getState() {
const path = window.location.pathname;
return path ? path : '/';
}
/*
pushState方法实现压入功能，PushState不会触发popstate事件，
因此我们需要手动调用handler函数
*/
push(path) {
window.history.pushState(null, null, path);
this.handler();
}
/*
pushState方法实现替换功能，replaceState不会触发popstate事件，
因此我们需要手动调用handler函数
*/
replace(path) {
window.history.replaceState(null, null, path);
this.handler();
}
go(num) {
window.history.go(num);
}
};
代码和hash.js 代码类似。
js/routerList.js
export const ROUTERLIST = [
{
path: '/',
name: 'index',
component: '这是首页'
},
{
path: '/hash',
name: 'hash',
component: '这是hash页面'
},
{
path: '/history',
name: 'history',
component: '这是history页面'
},
{
path: '*',
component: '404页面'
}
];
js/index.js
import { HashRouter } from './hash';
import { HistoryRouter } from './history';
import { ROUTERLIST } from './routerList';
// 路由模式，默认为hash
const MODE = 'history';
class WebRouter {
constructor({ mode = 'hash', routerList }) {
this.router = mode === 'hash' ? new HashRouter(routerList) : new HistoryRouter(routerList);
}
push(path) {
// 返回 this.router 因此有 hash或history中的push方法
this.router.push(path);
}
replace(path) {
this.router.replace(path);
}
go(num) {
this.router.go(num);
}
}
const webRouter = new WebRouter({
mode: MODE,
routerList: ROUTERLIST
});
document.querySelector('.list').addEventListener('click', e => {
const event = e || window.event;
event.preventDefault();
if (event.target.tagName === 'A') {
const url = event.target.getAttribute('href');
!url.indexOf('/') ? webRouter.push(url) : webRouter.go(url);
}
});
如上就是所有的代码了，仔细研究下看到这样编写代码的好处，就是 hash.js，和 history.js 代码分离出来了，并且都有对应的方法，然后在 index.js 初始化对应的代码。最后使用dom点击事件传递对应的路由进去。
