[深入11] 前端路由

[[react] Hooks](https://juejin.im/post/684490...

[[部署01] Nginx](https://juejin.im/post/684490...
[[部署02] Docker 部署vue项目](https://juejin.im/post/684490...
[[部署03] gitlab-CI](https://juejin.im/post/684490...

[[源码-webpack01-前置知识] AST抽象语法树](https://juejin.im/post/684490...
[[源码-webpack02-前置知识] Tapable](https://juejin.im/post/684490...
[[源码-webpack03] 手写webpack - compiler简单编译流程](https://juejin.im/post/684490...
[[源码] Redux React-Redux01](https://juejin.im/post/684490...
[[源码] axios ](https://juejin.im/post/684490...
[[源码] vuex ](https://juejin.im/post/684490...
[[源码-vue01] data响应式和初始化渲染 ](https://juejin.im/post/684490...
[[源码-vue02] computed 响应式 - 初始化，访问，更新过程 ](https://juejin.im/post/684490...

前置知识

URL 和 URI

<font color=red>URI：统一资源标识符（ I => Identifier：标识符Id）</font>
（Universal Resource Identifier
<font color=red>URL：统一资源定位符（ L => Locator：定位器）</font>
Uniform Resource Locator
区别：
- URL：强调的是地址，即( <font color=red>定位</font> )这个唯一的资源
- URI：强调的是( <font color=red>标识</font> )资源，资源具有的( <font color=red>唯一性</font> )
- 分别标识唯一资源和标识唯一地址很麻烦，所以用URL也充当RUI的角色，即标记唯一资源还标记该资源的唯一地址

URL的组成

http://www.baidu.com:80/stu/index.html?name=xxx&age=25#teacher

Protocol：协议 http:// ，https://
Domain：域名 www.baicu.com
Port：端口 :80
- http协议的默认地址是：80
- https自已的默认地址是：443
Path：文件路径， => /开始 ?之前的部分，本例中是：/stu/index.html
Query：查询字符串 => ?开头到结尾，或者?开头到#之前，本例是：?name=xxx&age=25
Hash：哈希值 => #开头到结尾，本例是：teacher
<font color=red>protocol，domain，port，path，query，hash</font>

DOMContentLoaded 事件，load事件

window.onload window.addEventListener('load', ....)
DOMContentLoaded
区别：
- <font color=red>DOMContentLoaded：DOM加载完成时触发</font>
- <font color=red>load：需要DOM，样式，脚本，图片，视频等所有资源都加载完成时才会触发，即页面加载完成才触发</font>
```
DOM完整解析过程:
```
解析html
解析css - 包括当html中的样式和外部引入的样式
解析并运行脚本 - 报错本html中的脚本和外部引入的脚本
DOM构建完成 ---------------------------------------------------- DOM加载完成，触发 DOMContentLoaded
加载图片，视频等其他资源
页面加载完毕 --------------------------------------------------- 页面加载完成，触发 load
// 2021/07/25更新 - 上面的过程不完善，这里再简单记录下
// - 详见https://juejin.cn/post/698357...
parse-html
parse-styleSheet
evaluate-script
layout
paint
composite

字符串 slice 方法特例

slice可用于 ( 数组 ) 和 ( 字符串 )
有返回值，不改变原字符串

<font color=red>String.prototype.slice(开始位置，结束位置) 截取字符串，不包括结束位置</font>

String.prototype.slice()

特例：
''.slice(1) ----------- 返回 '' 空字符串

案例：
window.location.hash 
// 因为：当地址栏的url中的hash不存在时，window.location.hash返回的是空字符串，这种情况如下
// 所以：window.location.hash.slice(1) => 返回空字符串

window.location 对象

window.location 对象

属性：
pathname: 返回url的path部分，/开始 ?之前 或者 /开始到结果，如果没有query和hash
origin：protocal + hostname + port 三者之和，相当于协议，域名，端口
protocal：协议 http:// https://
hostnme: 主机名
port：端口号
host：主机 （hostname + port）
search：查询字符串 （?开头到#之前，或者?开头到结尾）
hash：片段字符串 （哈希值，#开头到结尾）

返回值：
- window.location返回的是一个只读的Location对象，你仍然可以赋给它一个 DOMString
- 这意味着您可以在大多数情况下处理 location，就像它是一个字符串一样
- window.location = 'http://www.example.com'，是 window.location.href = 'http://www.example.com'的同义词

问题：
- window.location.assign() 和 window.location.href 的区别？
- location.assign(url)是函数式的方式
- window.location.href=url 比 location.assign(url) 更快

hash路由

url中的hash以#号开头，原本用来作为锚点，从而定位到页面的特定区域
当 hash 发生改变时，页面不会刷新，浏览器也不会向服务器发送请求
注意：<font color=red>hash改变时，可以触发 hashchange 事件，在监听函数中可以请求数据，实现页面的更新操作</font>

作为锚点，定位页面特点区域

<a href="#anchor1">锚点1</a>
<a href="#anchor2">锚点2</a>

<div id="anchor1">锚点1的位置</div>
<div id="anchor2">锚点2的位置</div>

说明：
- 点击a2，页面会跳转到div2的位置
- 并且页面的hash部分也会改变，即 url 中以 #开头的字符串会改变
- anchor：是锚的意思

- 注意：a标签的name属性已经废弃，用id代替 （因为有的教程使用name属性实现的）

hashchange事件

<font color=red>如果监听了hashchange事件，hash改变，地址栏的url中的hash部分就会改变，同时hashchange也会触发</font>
但是页面不会刷新，即浏览器的刷新按钮的圈圈不会转动

但是可以利用hashchange的回调函数更新页面的内容，注意不是页面刷新

<body>
<a href="#anchor1">锚点1</a>
<a href="#anchor2">锚点2</a>
<script>
  window.addEventListener('hashchange', function() {
    console.log('111111111')
  }, false)
</script>
</body>

点击a标签，url中的hash改变，hash改变，hashchange事件触发，则监听函数就会执行，输出111111

手动实现一个 hash-router

hash-router

原理：
(1) hash改变，地址栏url的hash字符串改变，触发hashchange事件
(2) 在hashchange事件的回调函数中更新视图


代码：
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
<a href="#/home">home</a>
<a href="#/other">other</a>
<div id="content">内容部分</div>

<script>
  const routes = [{
    path: '/home',
    component: '<h1>home页面</h1>'
  }, {
    path: '/other',
    component: '<h1>other页面</h1>'
  }]

  class Router {
    constructor(routes) { // 构造函数
      this.route = {} // 路由映射
      this.createRouteMap(routes) // 创建路由映射
      this.init() // 初始化
    }
    createRouteMap = (routes) => {
      routes.forEach(item => {
        this.route[item.path] = () => {
          document.getElementById('content').innerHTML = item.component
          // 函数体的作用：将id是content的div中的内容换成 componet
        }
        // 循环配置
        // key是path
        // value包装成一个更新html内容的函数，在 load 和 hahschange 中调用
      })
    }
    init = () => {
      window.addEventListener('load', this.updateView, false) // 页面加载完成时触发，注意区分DOMContentLoaded
      window.addEventListener('hashchange', this.updateView, false)
    }
    updateView = () => {
      const hash = window.location.hash.slice(1) || '/home'; // 初次加载home页面
      // load事件触发时，window.location.hash => 返回 '' 空字符串
      // ''.slice(1) => 返回''
      if (this.route[hash]) this.route[hash]()
      // 存在，则执行函数
    }
  }

  new Router(routes)
</script>
</body>
</html>

2020/12/24复习 - hash路由

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <a href="#/home">home页面</a>
  <a href="#/other">other页面</a>
  <div id="content">内容部分，即路由替换的部分</div>
  <div id="current-hash"></div>
  <script>
    const routes = [{
      path: '/home',
      component: 'home页面的内容'
    }, {
      path: '/other',
      component: 'other页面的内容'
    }]

    class HashRouter {
      constructor(routes) {
        this.route = {} // 路由映射
        this.createRouteMap(routes) // 创建路由映射，为 ( this.route ) 创建 ( map ) 映射;key=path;value=()=>{更新页面}
        this.init() // 初始化
      }
      createRouteMap = (routes) => {
        if (routes.length) {
          routes.forEach(({ path, component }) => {
            this.route[path] = () => {
              document.getElementById('content').innerHTML = component // 替换内容
            }
          })
        }
      }
      createRouteMap = (routes) => {
        if (routes.length) {
          routes.forEach(({ path, component }) => {
            this.route[path] = () => {
              document.getElementById('content').innerHTML = component // 替换内容
            }
          })
        }
      }
      init = () => {
        window.addEventListener('load', this.updateView, false)
        window.addEventListener('hashchange', this.updateView, false)
      }
      // 更新视图
      updateView = () => {
        // (1)
        // 这里 ( load事件 ) 和 ( hashchange事件 ) 都会触发 ( updateView方法 )
        // (2)
        // load事件: ( 页面加载完成时触发 )，包括 ( DOM，样式，图片，视频等所有资源都加载完成 )
        // DOMContentLoaded事件: 是在 ( DOM加载完成时触发 ) 
        // (3)
        // 当load事件触发时，hash并没有改变，即 window.location.hash = '' => ''.slice(1) => ''
        const hash = this.getCurrentHash() // 获取hash
        // if (Object.keys(this.route).includes(hash)) { // 还有更简单的方法
        //   this.route[hash]()
        // }
        if (this.route[hash]) this.route[hash]() // 如果this.route对象中的key对应得值存在，就执行该函数
      }
      // 获取当前地址栏的 hash
      getCurrentHash = () => {
        const hash = window.location.hash.slice(1)
        this.printHahToHtml(hash) // 该函数是用来在html中显示当前hash的
        return hash ? hash : '/home'
        // load事件触发时，hash就不存在，hash=''，这种情况下即默认情况下返回 '/home' 路由
        // load事件触发时，window.location.hash => 返回 '' 空字符串
        // ''.slice(1) => 返回''

      }
      printHahToHtml = (hash) => {
        const DOM = document.getElementById('current-hash')
        DOM.innerHTML = `当前页面的hash是:=> #${hash}`
        DOM.style.setProperty('background', 'yellow')
        DOM.style.setProperty('padding', '10px')
      }
    }

    new HashRouter(routes)
  </script>
</body>
</html>

2021/07/25优化 - hash路由

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <a href="#/home">home页面</a>
    <a href="#/other">other页面</a>
    <div id="content">内容部分，即路由替换的部分</div>
    <div id="current-hash"></div>
    <script>
      const routes = [
        {
          path: "/home",
          component: "home页面的内容",
        },
        {
          path: "/other",
          component: "other页面的内容",
        },
      ];

      class HashRouter {
        constructor(routes) {
          this.route = {};
          this.createRouteMap(routes);
          this.init();
        }

        init = () => {
          window.addEventListener("load", this.updateView, false);
          window.addEventListener("hashchange", this.updateView, false);
          this.DOM_CURRENT_HASH = document.getElementById("current-hash");
          this.DOM_CONTENT = document.getElementById("content");
        };

        // createRouteMap = (routes) => {
        //   if (routes.length) {
        //     routes.forEach(({ path, component }) => {
        //       this.route[path] = () => {
        //         document.getElementById("content").innerHTML = component; // 替换内容
        //       };
        //     });
        //   }
        // };

        createRouteMap = (routes = []) => {
          routes.forEach(
            ({ path, component }) =>
              (this.route[path] = () =>
                (this.DOM_CONTENT.innerHTML = component))
          );
        };

        // updateView = () => {
        //   const hash = this.getCurrentHash(); // 获取hash
        //   if (this.route[hash]) this.route[hash](); // 如果this.route对象中的key对应得值存在，就执行该函数
        // };

        updateView = () => {
          const path = this.getCurrentHash();
          this.route?.[path]?.();
        };

        // getCurrentHash = () => {
        //   const hash = window.location.hash.slice(1);
        //   this.printHahToHtml(hash); // 该函数是用来在html中显示当前hash的
        //   return hash ? hash : "/home";
        // };

        getCurrentHash = () => {
          const path = window.location.hash.slice(1) || "/home";
          this.printHahToHtml(path); // 该函数是用来在html中显示当前hash的
          return path;
        };

        // printHahToHtml = (hash) => {
        //   const DOM = document.getElementById("current-hash");
        //   DOM.innerHTML = `当前页面的hash是:=> #${hash}`;
        //   DOM.style.setProperty("background", "yellow");
        //   DOM.style.setProperty("padding", "10px");
        // };

        printHahToHtml = (hash) => {
          const DOM = this.DOM_CURRENT_HASH;
          DOM.innerHTML = `当前页面的hash是:=> #${hash}`;
          DOM.style.setProperty("padding", "10px");
          DOM.style.setProperty("background", "yellow");
        };
      }

      new HashRouter(routes);
    </script>
  </body>
</html>

history路由

window.history 对象

window.history对象的方法：back()， forward()， go()，pushState()，replaceState()
pushState()
replaceState()
<font color=red>pushState() 和 replaceState()</font>
- <font color=red>不会触发页面刷新，只能导致History对象发生变化，地址栏的url会变化</font>
- <font color=red>会改变url，不会触发 popstate 事件，地址栏的url有所变化</font>

window.history.pushState(state, title, url)

window.history.pushState(state, title, url)
state：一个与添加的记录相关联的对象
title：新页面的标题，现在所有浏览器都忽略该参数，可以传入空字符串
url：新的url地址，必须与当前页面同一个域，浏览器的地址栏显示这个网址
window.history.pushState({}, null, url)
注意：pushState不会刷新页面，只会改变History对象，地址栏url会变化
- <font color=red>可以通过 History.state 读取状态对象</font>

popstate

<font color=red>popstate触发的条件</font>
- <font color=red>浏览器的前进后退按钮</font>
- <font color=red>history.go()， history.back()， history.forward()</font>
<font color=red>注意：window.history.pushState() 和 window.history.replaceState()不会触发 popstate 事件</font>
注意：pushState()和replaceState()可以改变url，且实现不向服务器发送请求，不存在#号，比hash路由更美观，但是 History 路由需要服务器的支持，并且需将所有的路由重定向到根页面

手动实现一个 history-router

原理分析

第一步：给每个a标签都绑定一个click事件，click事件触发时，再去触发pushState()事件，将url的path部分改变为a的data-href自定义属性的值即路由的path，传入window.history.pushState({}, null, path)，这样地址栏的url就改变了
第二步：改变地址栏的url后，通过window.location.pathname获取更新的url的path部分
第三步：用 path 和 route对象中的key去匹配，匹配上就去执行更新视图的函数

第四步：

这只是一条线：1-3步即点击a标签的情况

还有一条线：浏览器的前进后退，和函数式导航go() back() forward() 则有 popstate 事件来处理，过程差不多

history-router

原理：
(1) 封装一个方法，在pushState()和replaceState()改变url后调用，在该方法中获取最新的window.location.path，更相信页面
(2) 通过 go() back() forward() 浏览器前进后退等触发 popstate 事件


代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<a href="javascript:void(0)" data-href="/home">home</a> // html中的自定义属性
<a href="javascript:void(0)" data-href="/other">other</a>
<div id="content">content的内容</div>

<script>
const routes = [{
path: '/home',
component: '<h1>home页面</h1>'
}, {
path: '/other',
component: '<h1>other页面</h1>'
}]

class Router {
constructor(routes) {
  this.route = {} // key-value键值对，key是path，value是更新视图的函数
  this.createRouteMap(routes) // 创建路由映射
  this.bindEvent() // 绑定a标签的点击事件
  this.init() // 绑定load和popstate事件
}
createRouteMap = (routes) => {
  routes.forEach(item => {
    this.route[item.path] = () => {
      document.getElementById('content').innerHTML = item.component
    }
  })
}
bindEvent = () => {
  const a = document.getElementsByTagName('a')
  Array.prototype.forEach.call(a, item => { // 第二个参数，是forEach需要传入的回调函数
    item.addEventListener('click', () => {
      const path = item.getAttribute('data-href') // 获取data-herf属性
      this.pushStateFn(path) 
      // 执行History.pushState()方法
      // 这里由于是箭头函数，this指向父级所在的上下文环境，即 bindEvent 所在的上下文环境，即Router 
    }, false)
  })
}
pushStateFn = (url) => {
  window.history.pushState({}, null, url) // 改变url后，调用更新视图的函数updateView
  this.updateView() // 更新视图
}
init = () => {
  window.addEventListener('load', this.updateView, false) // 页面加载完成时触发
  window.addEventListener('popstate', this.updateView, false) // 浏览器前进后退，History.go() back() forward()时触发
}
updateView = () => {
  const path = window.location.pathname || '/'; // 获取url的path部分
  if(this.route[path]) this.route[path]() // path在route中存在，就执行对象的函数，key-value键值对
}
}

new Router(routes)
</script>
</body>
</html>

注意：该html需要用 Live Server 启动，vscode插件，来提供server

2020/12/24复习 - history路由

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <a href="javascript:void(0)" data-href="/home">点击去home页面</a>
  <a href="javascript:void(0)" data-href="/other">点击去other页面</a>
  <div id="content">内容部分，即路由要替换的内容</div>
  <script>
    const routes = [{
      path: '/home',
      component: '<h1>home页面</h1>'
    }, {
      path: '/other',
      component: '<h1>other页面</h1>'
    }]
    class HistoryRouter {
      constructor(routes) {
        this.route = {} // 路由映射 key=path value=()=>{更新视图}
        this.createRouteMap(routes) // 创建路由映射
        this.bindEvent() // 绑定事件
        this.init() // 初始化
      }
      createRouteMap = (routes) => {
        if (routes.length) {
          routes.forEach(({ path, component }) => {
            this.route[path] = () => {
              document.getElementById('content').innerHTML = component
            }
          })
        }
      }
      bindEvent = () => {
        const a = document.getElementsByTagName('a')
        Array.prototype.forEach.call(a, aDom => {
          aDom.addEventListener('click', () => {
            const path = aDom.getAttribute('data-href')
            this.triggerPushState(path) // 触发pushState事件
          }, false)
        })
      }
      triggerPushState = (path) => {
        window.history.pushState({}, null, path)
        // pushState() 可以改变地址栏的url，但是不会触发页面更新，所以要执行下面的更新函数
        // (1) 情况1：这只是 ( 点击a标签 ) 的情况，使用的是 pushState() 函数
        // (2) 情况2：还有就是 ( 点击浏览器的前进后退按钮 ) 和 ( 函数式k导航 window.history.go() back() forward() 的情况 )
        // (3) 情况3：就是初始化时，在 ( load ) 事件触发是的情况，默认path='/'
        this.updateView()
      }
      updateView = () => {
        // 因为：在执行该方法之前，已经触发了 pushState() || popstate事件 || load事件
        // 所以：可以用window.location.pathname 获取最新的 url中的 path 部分
        const currentPath = window.location.pathname
          ? window.location.pathname
          : '/'

        if (this.route[currentPath]) this.route[currentPath]()
      }
      init = () => {
        window.addEventListener('load', this.updateView, false) // 页面加载完成时的情况
        window.addEventListener('popstate', this.updateView, false) // popstate触发的情况，浏览器前进后退和函数式导航
      }
    }

    new HistoryRouter(routes)
  </script>
</body>
</html>

注意：该html需要用 Live Server 启动，vscode插件，来提供server

2021/07/25优化 - history路由

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <a href="javascript:void(0)" data-href="/home">home</a>
    <a href="javascript:void(0)" data-href="/other">other</a>
    <div class="root">content</div>
    <script>
      // history路由
      // 原理：
      //  - 1. window.history.pushState(stateObj, title, url) 和 window.history.replaceState(stateObj, title, url) 不会触发popstate，不会刷新浏览器，但是会改变history对象，并且url地址栏会改变
      //  - 2. popstate事件，触发条件
      //       - window.history.go()/back()/forward()
      //       - 浏览器的前进，后退按钮
      // history路由实现
      // - 1. 给每个a标签添加 ( data-href自定义属性 )，并且给每个a标签 ( 绑定click事件 )，点击后获取data-href，然后触发 ( window.history.pushState({}, null, data-href))
      // - 2. 经过1后，触发了window.history.pushState()后，地址栏的url会改变，然后通过 ( window.location.pathname ) 获取改变后的 path
      // - 3. 然后通过path去匹配routes数组中的path，匹配上就去更新 ui

      const routes = [
        {
          path: "/home",
          component: "<h1>home页面</h1>",
        },
        {
          path: "/other",
          component: "<h1>other页面</h1>",
        },
      ];

      class HistoryRouter {
        constructor(routes) {
          this.route = {};
          this.init();
          this.createRouteMap(routes); // ( path ) 和 ( ui更新函数 ) 之间的 ( 映射 )
          this.bindEvent(); // a标签绑定click事件
        }

        createRouteMap = (routes = []) => {
          routes.forEach(
            ({ path, component }) =>
              (this.route[path] = () =>
                (this.DOM_CONTENT.innerHTML = component))
          );
        };

        init = () => {
          window.addEventListener("load", this.updateView, false);
          window.addEventListener("popstate", this.updateView, false);
          this.DOM_CONTENT = document.getElementsByClassName("root")[0];
        };

        bindEvent = () => {
          const aList = document.getElementsByTagName("a");
          [...aList].forEach((a) => {
            const path = a.getAttribute("data-href");
            a.addEventListener(
              "click",
              (e) => {
                window.history.pushState({}, null, path); // window.history.pushState(state, title, url)，会改变地址栏url
                this.updateView(); // 更新视图
              },
              false
            );
          });
        };

        updateView = () => {
          const path = window.location.pathname; // 获取最新path
          this.route?.[path]?.();
        };
      }

      new HistoryRouter(routes);
    </script>
  </body>
</html>

注意：该html需要用 Live Server 启动，vscode插件，来提供server

手动实现一个vue-router（hash版）

原理
- 大体的原理和hash路由的html版本一样，微小区别
- 都是利用 ( a标签 ) 的 ( href ) 中的 ( '#/xxx' ) 这样的hash串
- 只要点击 a标签 => 地址栏的url的hash部分就会改变 => 同时触发 hashchange 事件 => 通过window.location.hash获取最新的hash
- 获取到 hash 在和 routeMap 中的path匹配，匹配后就改变视图
区别
- 区别就是 Vue 自己封装了 <router-link> 和 <router-view> 组件
- 可以通过 Vue.component() 方法注册上面两个组件
- 通过 vm.name 可以访问到 new Vue({data: {name: xx}})中的name
```
手动实现一个vue-router（hash版）
```
<router-link to="#/home">home</router-link> // 点击会跳转到 '#/home' 地址
<router-view></router-view> // 路由将显示的DOM位置
// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
data: function () {
return {
```
count: 0
```
}
},
template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})
因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项

例如 data、computed、watch、methods 以及生命周期钩子等。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">

<router-link to="#/home">home</router-link>
<router-link to="#/other">other</router-link>
<router-view></router-view>
</div>

// 创建vue路由数组
const routes = [{

path: '/home',
component: Home

}, {

path: '/other',
component: Other

}]

class VueRouter {

constructor(Vue, option) {
  // 参数：
  // Vue：Vue构造函数，通过cdn引入的
  // option: 配置对象，包含routes路由数组属性
  this.$options = option
  this.routeMap = {} // 路由映射，是这样的结构 { path: component }
  this.createRouteMap(this.$options) // 创建路由映射

  this.app = new Vue({
    data: {
      currentHash: '#/'
    }
  })
  // this.app.currentHash => 可以访问到currentHash的值 '#/'
  // 举例
  // var data = {name: 'woow_wu7'}
  // var vm = new Vue({
  //  data: data
  // })
  // vm.name === data.name => true

  this.init() // 初始化监听函数
  this.initComponent(Vue) // 初始化Vue种的各种组件
}
createRouteMap = (option) => {
  // 注意：option 是传入VueRoute的第二个参数，即 {routes: routes}
  // 所以：options是一个对象
  option.routes.forEach(item => {
    this.routeMap[item.path] = item.component
    // this.routeMap是这样一个对象：{path: component}
  })
}
init = () => {
  window.addEventListener('load', this.onHashChange, false)
  // 页面加载完成触发，注意区别 DOMContentLoaded
  // load：页面加载完成时触发，包括 DOM加载完成，图片，视频等所有资源加载完成
  // DOMContentLoaded：DOM加载完成时触发
  window.addEventListener('hashchange', this.onHashChange, false)
  // 监听 hashchange 事件
  // 触发hashchange的条件：hash改变时候
}
onHashChange = () => {
  this.app.currentHash = window.location.hash.slice(1) || '/'
  // (1)
  // 当 hahs没有改变时，load事件触发时
  // window.location.hash = '' =>  window.location.hash.slice(1) = ''
  // 所以：此种情况：this.app.currentHash =  '/'
  // (2)
  // hash改变时，window.location.hash有值，是 '#/...' 这样的字符串
}
initComponent = (Vue) => {
  // router-link组件
  // props to属性
  // template 本质上会被处理成a标签，href属性是传入的 to 属性，内容是 slot 插入的内容
  Vue.component('router-link', {
    props: {
      to: {
        type: String,
        value: ''
      }
    },
    template: '<a :href="to"><slot/></a>'
  })
  Vue.component('router-view', {
    render: (h) => {
      const component = this.routeMap[this.app.currentHash] // 拿到最新hash对应的组件
      return h(component)
      // h(component) 相当于 createElement(component)
      // render: function(createElement) { return createElement(App); }
    }
  })
}

}
new VueRouter(Vue, {

routes

})
new Vue({

el: '#app'

})
</script>
</body>
</html>

资料

URI和URL：https://www.luyuqiang.com/uri...
URI和URL的区别举例（很形象）https://juejin.im/post/684490...
URL的组成（优秀）https://www.jianshu.com/p/406...
DOMContentLoaded和load的区别：https://www.jianshu.com/p/1a8...
window.location对象：https://wangdoc.com/javascrip...
vue-router模拟实现 https://juejin.im/post/684490...
hash history 路由模拟实现 https://juejin.im/post/684490...
vue-router源码记录 https://juejin.im/post/684490...
VueRouter源码分析 https://juejin.im/post/684490...