前端路由

1、前端路由 ： 路由是根据不同的 url 地址展示不同的内容或页面。

　　参考：https://blog.csdn.net/u014168594/article/details/79181828  或  https://www.cnblogs.com/yuqing6/p/6731980.html

　　注意：url前面是一样，是同一个html文件，只是后面的值不同（如果是用Hash + Ajax 实现的，后面的值一定有 # ；如果是使用H5的API具体自己设置）。

2、前端一般是用在单页应用中的，单页应用不一定整个应用都是单页应用。往往是多页应用中，某些页面使用单页应用实现会比较好。

　　比如：一个网站中（多个html），某一个html中需要滚动翻页的效果。那这个html页面可以做成单页应用。

　　参考：http://webank.com/ 网站 中的 “关于我们”  和 “公告新闻” 页面都是单页应用，其它的页面并不是单页应用。

　　注：url 改变的话，浏览器的前进后退功能就可以有效。即浏览器会把不同的url访问作为一个历史记录，保存在当前 浏览器页面进程中。

　　问题：那么 路由和单纯的hash（a标签就可以实现）实现的页面的改变有什么区别呢？

　　区别主要在于使用路由，单页应用页面的跳转体验更像不同页面在跳转；而单纯的hash改变页面展示，只是展示页面的不同位置，通过滚动就可以看到哪个地方是视图。

3、原生JS实现一个简单的前端路由（原理）  ：   https://www.cnblogs.com/exhuasted/p/6839515.html

function Router() {
    this.routes = {};
    this.currentUrl = '';
}
Router.prototype.route = function(path, callback) {
    this.routes[path] = callback || function(){};
};
Router.prototype.refresh = function() {
    this.currentUrl = location.hash.slice(1) || '/';
    this.routes[this.currentUrl]();
};
Router.prototype.init = function() {
    window.addEventListener('load', this.refresh.bind(this), false);
    window.addEventListener('hashchange', this.refresh.bind(this), false);
}
window.Router = new Router();
window.Router.init();


var content = document.querySelector('body');
// change Page anything
function changeBgColor(color) {
    content.style.backgroundColor = color;
}
Router.route('/', function() {
    changeBgColor('white');
});
Router.route('/blue', function() {
    changeBgColor('blue');
});
Router.route('/green', function() {
    changeBgColor('green');
});