路由的原理和实现

路由

1.路由是什么？
本质就是，查找资源的方式
2.路由的分类
前端路由：通过动态改变url实现
后端路由:资源通常放在服务器上
3.前端路由
哈希模式：监听 url地址栏中 # 后面的内容变化/锚点
历史纪录：’window.history’对象，监听’popstate’事件

基于锚点的哈希路由模式

 <nav>
       <a href="#/list">国际新闻</a>
       <a href="#/list2">娱乐新闻</a>
   </nav>
  <div class="route-view"></div>
     <script>
         let list1=`<ul id="list1">
    <li><a href="">国际新闻1</a></li>
    <li><a href="">国际新闻1</a></li>
    <li><a href="">国际新闻1</a></li>
</ul>`;
        let list2=`<ul id="list2">
       <li><a href="">娱乐新闻2</a></li>
       <li><a href="">娱乐新闻2</a></li>
       <li><a href="">娱乐新闻2</a></li>
   </ul>`;
         //获取路由的内容显示区元素
         const routeView=document.querySelector('.route-view');
         //锚点使用 location.hash
         //hashchange: url中的锚点变化时会自动触发这个事件
         window.addEventListener("hashchange",show);
         window.addEventListener("load",show);
        //  window.addEventListener("DOMContentLoaded",show);
         function show(){
             switch(location.hash){
                 case "#/list1":
                     routeView.innerHTML=list1;
                     break;
                 case  "#/list2":
                     routeView.innerHTML=list2;
                     break;
                  default:
                      routeView.innerHTML=list1;
             }
         }
     </script>

Vue的路由基于哈希实现，使用a标签的锚点实现

<nav class="app">
       <!-- 1.vue的路由基于哈希实现，使用a标签的锚点来实现 -->
       <router-link to='/list1'>国内新闻</router-link>
       <router-link to='/list2'>娱乐新闻</router-link>
       <!-- 路由到的资源显示区域 -->
       <router-view></router-view>
    </nav>
    <script>
        //1.创建路由对象
        const router=new VueRouter({
        //路由配置项
        routes:[
          //每个路由都是一个对象，每一个对象对应者一个路由地址
           {
               path: '/list1',
               compontent:{
                   template:`
                   <ul id="list1">
                    <li><a href="">国际新闻1</a></li>
                    <li><a href="">国际新闻1</a></li>
                    <li><a href="">国际新闻1</a></li>
                   </ul> `,
               }
            },
            {
                path: '/list2', 
               compontent:{
                   template:`
                   <ul id="list2">
                    <li><a href="">娱乐新闻1</a></li>
                    <li><a href="">娱乐新闻1</a></li>
                    <li><a href="">娱乐新闻1</a></li>
                   </ul> `,
               }
            },
        ]
        });
        //2.注册路由
    new Vue({
        router:router,
    }).#mount(".app");
    </script>

历史记录对象路由模式

  <nav>
        <a href="#/list1">国际新闻</a>
        <a href="#/list2">娱乐新闻</a>
    </nav>  
   <div class="route-view">
      </div>
      <script>
          let list1=`<ul id="list1">
     <li><a href="">国际新闻1</a></li>
     <li><a href="">国际新闻1</a></li>
     <li><a href="">国际新闻1</a></li>
 </ul>`;
         let list2=`<ul id="list2">
        <li><a href="">娱乐新闻2</a></li>
        <li><a href="">娱乐新闻2</a></li>
        <li><a href="">娱乐新闻2</a></li>
    </ul>`;
const routeView=document.querySelector(".router-view");
const links=document.querySelectorAll("nav a[href]");
links.forEach(link=>link.onclick=(ev)=>{
 //禁用a标签的挑战
 ev.preventDefault();
 //history.pushState(状态对象，标题，url)
 history.pushState(null,"",link,href);
//手动更新了url,但popstate事件监听不到这个变化
show();
});
window.addEventListener("popstate",show);
function show(){
    console.log(location.pathname);
    switch(location.pathname){
                 case "#/list1":
                     routeView.innerHTML=list1;
                     break;
                 case  "#/list2":
                     routeView.innerHTML=list2;
                     break;
                  default:
                      routeView.innerHTML=list1;
             }
}
</script>