单页面路由相关知识的一点理解

前言

从vue框架路由可以知道目前主流单页路由有两种模式
我一种是带hash值的模式，一种是history模式

1.history模式

history模式我没有研究过，不过我研究过history对象的使用
其原理无非就是直接通过history的pushState直接插入记录改变地址
或者使用replaceState直接替换当前显示地址

var state = { 
    title: title, 
    url: url
};
if(window.history.pushState){
    window.history.pushState(state,title,url);
}

//替换当前地址
history.replaceState(data, title, url); 

使用history模式的好处是可以使url地址简洁好看
但是如果处理不好问题也有不少
1.需要后台搭配好，不然容易出现访问地址404的问题
2.部分手机浏览器会有记录上限问题（当然这是很少一部分，比如微信以前就碰到过）
pushState会添加历史记录可以正常的前进后退
replaceState替换当前 那么就会丢失历史记录

2.hssh模式

url#xxx

//使用一下方式改变当前hash值
location.hash=hash;

url地址不变仅改变hash值来标识不同页面，然后使用js来控制展示的内容
如果需要配合前进后退按钮正常使用的话最好是配合history对象一起使用
hash模式可以监听hashChange事件来判断页面的改变，然后去改变页面的内容
如果同时使用了history的pushState来添加历史记录 那么也可以使用popstate来监听切换事件

window.addEventListener("hashchange",function(e){
  //hashchange返回事件对象中有oldURL和newURL属性可以判断新旧hash值
  //不过该属性在部分浏览器中会没有，最好还是在方法体中手动记录然后使用
  //切换页面显示内容
  //vue中可以执行某个阶段的钩子函数
},false);

3.阻止后退

常规的阻止后退方法有pushState一条空记录

history.pushState(null, null, document.URL.split("?")[0] + "?rand=" + Math.random());

如果你使用了hash值来充当url变化
你可以在hashchange事件里面将地址改回来

4.标题

单页应用模拟页面切换难免需要改变标题
部分浏览器支持直接修改document.title
但是总有浏览器不支持这种修改模式 --比如微信
原因网上描述说是：
微信浏览器首次加载页面初始化title后，就再也不监听 document.title的change事件

最后找到了通过插入iframe标签的模式来修改

        changeTitle:function(title){
            var body = document.getElementsByTagName('body')[0];
            document.title = title;
            var iframe = document.createElement("iframe");
            iframe.setAttribute("style", "width: 0;height: 0;border: none;background: transparent;");
            iframe.setAttribute("src", "/favicon.ico");
            if(document.addEventListener) {
                iframe.addEventListener('load', function() {
                    //注销事件, 避免反复触发
                    iframe.removeEventListener('load',arguments.callee, false);
                    setTimeout(function() {
                        //iframe.removeEventListener('load');
                        document.body.removeChild(iframe);
                    }, 0);
                }, false);
            }else if(document.attachEvent) {        //IE
                iframe.attachEvent('load', function() {
                    if(iframe.readyState == 'complete') {
                        iframe.detachEvent('load', arguments.callee);
                        setTimeout(function() {
                            //iframe.removeEventListener('load');
                            document.body.removeChild(iframe);
                        }, 0);
                    }
                });
            }
            document.body.appendChild(iframe);
        }

总结

不少情况都可能碰到有对浏览器前进返回刷新按钮控制的需求，
如果不了解可以直接使用已经成系统的框架路由
如果碰到只需要简单使用一下的情况就有可能会用的到这些东西了