路由原理

window.hashchange 监听实现跳转对应路由

 <!-- 1、定义视图，(点击)改变哈希地址 -->
 <ul>
     <li><a href="#/index">首页</a></li>  
     <li><a href="#/list">列表页</a></li>
     <!-- 注意：href填的是hash地址，这里的 #/ 不要去掉 ，为的是不改变域名(地址栏中#前面的为域名)-->
 </ul>
 <div id="routerView"></div>
 <script>
     // 2、定义路由
     let louter = {
         //路由名称     视图页面
         "#/index": "./index.html",
         "#/list": "./list.html"
     }
     //3、检测哈希地址的改变(事件监听)
     window.addEventListener('hashchange',()=>{
       //location.hash可以获取哈希地址
         console.log("location.hash为: ", location.hash)   
         // 可以看出location.hash就是我们的键，我们可以通过 louter[键名] 来获取值，即获取视图页面
         let url = louter[location.hash]
         // console.log(url)
         // 加载对应视图
         // 在<div id="routerView"></div>中load加载需要的视图页面
         $("#routerView").load(url)
     })
 </script>