钰溪-vue.js前端路由及异步组件

hash

hashchange事件：可以监听hash路由的变化

history

1.方法

• pushState(data, title, ?url)：不会触发popstate
• replaceState(data, title, ?url)：不会触发popstate
• back
• forward
• go
• popstate事件：可以监听浏览器的前进回退按钮和js的back、forward、go方法

hash和history的区别

1. 形式上hash会在域名后面加上‘#’，history不会
2. 事件上，监听hash用的是hashchange，监听history用的是popstate，不过popstate不能监听到pushState和replaceState

哪个好

不注重形式的话用hash，history是h5的新出的，MDN中显示IE只兼容12及以上的

前端路由原理

前端路由其实就是监听请求地址的改变，根据不同的地址进行不同的操作，hash模式和history的实现会有所不同，hash主要是使用hashchange进行监听，history主要对一些页面会改变路径的操作进行监听。页面上操作的请求前端能直接拦截下来，但如果是直接对地址栏进行操作(如点回车)，这时候会向后端发送一个网络请求，需要后端配置Nginx对请求进行拦截，并转为index页面(作为spa应用，地址栏的路径在后端是没有对应的资源的，如果不拦截就会报404)

1. hash实现

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' 这样的
    */
    console.log('hashChangeUrl');
    this.currentHash = location.hash.