实现JS路由

81 阅读1分钟
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul>
    <li><a href="#/aaa">AAA</a></li>
    <li><a href="#/bbb">BBB</a></li>
    <li><a href="#/ccc">CCC</a></li>
</ul>
<div id="container"></div>
</body>
<script>
    var div = document.getElementById('container');
    window.onhashchange = function(){
        var hash = location.hash;
        switch(hash){
            case '#/aaa':
                div.innerHTML = '这是页面一的内容'
                break;
            case '#/bbb':
                div.innerHTML = '这是页面二的内容'
                break;
            case '#/ccc':
                div.innerHTML = '这是页面三的内容'
                break;
        }
    }
</script>
</html>

总结:
获取路径值 var hash = location.hash;
当路径发生变化时,触发window.onhashchange = function(){}
使用switch...case...进行匹配