① 通过location.hash实现前端路由
hash是指url中#后面的部门，这部分在服务器会被自动忽略，但是在浏览器中可以通过location.hash来获取。此方式主要是用到了onhashchange事件，这个事件可以监听url中的hash值变化，以此来进行一些DOM的切换操作。
onhashchange事件的触发条件有: a、改变url地址，在最后面增加或改变其hash值 b、改变location.href或location.hash c、点击带有锚点的链接 d、浏览器前进后退可能导致hash的变化，就是两个网页地址中的hash值不同 实现思路： 当浏览器地址栏url的hash值发生变化时，就会触发onhashchange事件，这时需要通过window.location.hash可以拿到当前浏览器的url的hash值，此时的hash值是带有#的。可以根据不同的hash值执行不同的回调函数，即加载相应的组件。 实现方式： 当hash值发生变化会触发此事件 window.addEventListener(‘hashchange’,fn)
② 利用window.history实现前端路由
window对象都有一个history属性，用来保存用户访问过的页面列表，我们在浏览网页时的前进和后退都是由这个对象来实现的。
在用history实现前端路由的过程中，主要使用到了history.pushState()和history.replaceState()这两个接口。二者均接收三个参数，分别是state，title，url，state用来存放将要插入history实体的相关信息，是一个json格式的参数；title是传入history实体的标题，firefox现在会自动忽略掉这个属性；url用来传递新的history实体的相对路径，如果其值为null则表示当前要插入的history实体与前一个实体一致，没有改变。 两者唯一的区别在于replaceState()方法会将最新一条的history实体覆盖掉，而不是直接添加。 这两个方法都不会主动触发浏览器页面的刷新，只是history对象包括地址栏的内容会发生改变，当触发前进后退等history事件时才会进行相应的响应。 浏览器的前进后退会触发window.onpopstate事件，通过绑定 popstate事件，就可以根据当前url地址中的查询内容让对应的菜单执行ajax载入，实现ajax的前进和后退效果。