Vue-cli3基础教程(十四)

vue-router的hash模式是通过dom的hash属性实现的，hash 属性是一个可读可写的字符串，该字符串是 URL 的锚部分（从 # 号开始的部分）。

通过以下案例，模拟实现vue-router的hash模式的内部实现原理。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #router-view{
            margin: 0px auto;
            background: lightblue;
            width: 100%;
            height: 100vh;
            border: 1px solid #ccc;
            text-align: center;
        }
    </style>
</head>
<body>

<div id="router-view">

</div>

<script>

    let routers=[
        {
            path:'#/users',
            content:"<h2>用户首页</h2><hr><div><a href='#/users/list'>用户列表</a> | <a href='#/users/detail'>用户详情</a></div>"
        },
        {
            path:'#/users/list',
            content:"<h2>用户列表页面</h2><hr><div><a href='#/users/list'>用户列表</a> | <a href='#/users/detail'>用户详情</a></div>"
        },
        {
            path:'#/users/detail',
            content:"<h2>用户详情页面</h2><hr><div><a href='#/users/list'>用户列表</a> | <a href='#/users/detail'>用户详情</a></div>"
        }
    ]


    function doRoute(){
        //console.log(location.hash);

        let currentPath = location.hash.split(1);
        console.log(currentPath);
        /*
        if(location.hash==='#/users/list'){
            document.querySelector("#router-view").innerHTML = "<h2>用户列表页面</h2><hr><div><a href='#/users/detail'>用户详情</a></div>";
        }else if(location.hash==='#/users/detail'){
            document.querySelector("#router-view").innerHTML = "<h2>用户详情页面</h2><hr><div><a href='#/users/list'>用户列表</a></div>";
        }else{
            document.querySelector("#router-view").innerHTML = "<h2>404</h2><hr>";
        }*/

        let routerView =  document.querySelector("#router-view");
        let target =  routers.find(item=>{return item.path == currentPath})

        console.log(target);
        if(!target){
            routerView.innerHTML = "<h2>404</h2><hr><div><a href='#/users/list'>用户列表</a> | <a href='#/users/detail'>用户详情</a></div>";
            return;
        }
        routerView.innerHTML = target.content;

    }

    window.onhashchange =(e)=>{
        doRoute();
    }
    doRoute();

    window.location.hash = '#/users'
</script>
</body>
</html>

运行效果：