九段刀客 vue-router实现原理

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/weixin_35958891/article/details/102699579

hash模式

<a href="#/home">首页</a>
<a href="#/about">关于</a>
<div id="html"></div>
<script>
	let PageHome = `<div><h4>首页页面</h4></div>`
	let PageAbout = `<div><h4>关于页面</h4></div>`
     window.addEventListener("load", () => {
        let url = location.hash.slice(1);
        switch (url) {
          case "/home":
            html.innerHTML = PageHome;
            break;
          case "/about":
            html.innerHTML = PageAbout;
            break;
        }
      });
      window.addEventListener("hashchange", () => {
        let url = location.hash.slice(1);
        switch (url) {
          case "/home":
            html.innerHTML = PageHome;
            break;
          case "/about":
            html.innerHTML = PageAbout;
            break;
        }
      });
</script>