路由

概念：根据url（网址）地址的不同给用户显示不同的页面

跳转方式

使用进行跳转

<script>
        var url=`http://47.108.197.28:3000/top/playlist?cat=华语`;
        $ajax({
            url,
            success:res=>{
                console.log(res.playlists)
                var playlists=res.playlists;
                playlists.forEach((item,index)=>{
                    var {name,id,coverImgUrl}=item;
                    var template=`
                    <a href='02detail.html?id=${id}'>
                    <div class="item">
                        <img src="${coverImgUrl}"/>
                        <p>${name}</p>
                        </div>
                        </a>
                    `
                    $("#app").append(template)
                })
            }
        })
    </script>
                    `

事件跳转（自定义一个属性）

<script>
        var url=`http://47.108.197.28:3000/top/playlist?cat=华语`;
        $ajax({
            url,
            success:res=>{
                console.log(res.playlists)
                var playlists=res.playlists;
                playlists.forEach((item,index)=>{
                    var {name,id,coverImgUrl}=item;
                    var template=`
                    <div class="item" data-aid=${id}>
                        <img src="${coverImgUrl}"/>
                        <p>${name}</p>
                        </div>
                    `
                    $("#app").append(template)
                })
                $(".item").click(function(event){
                    var {aid}=event.currentTarget.dataset;
                    console.log(aid)
                    location.href=`02detail.html?id=${aid}`
                })
            }
        })
    </script>

自定义属性方式：

***原生方式***
   var app=document.getElementById("app");
        app.onclick=function(event){
            console.log(event.target.dataset)
        }
***jquery***
          $("div").click(function(event){
             console.log(event.currentTarget.dataset.aid)
         })