vue-router 原理（1）

时间 2019-12-10

标签 vue router 原理繁體版

原文原文链接

　hashchange

　　第一讲，大概说一下 vue-router使用hash模式下地址栏地址变化时发生的事情html

　　当一个窗口的 hash （URL 中 # 后面的部分）改变时就会触发 hashchange 事件vue

window.onhashchange = funcRef;
<body onhashchange="funcRef();">

上面两种写法均可以，可是将覆盖现有的事件处理程序，为了添加一个新的事件处理程序，而不覆盖掉已有的其余事件处理程序，可使用函数 "addEventListener"，vue-router

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <a href="#/login">登陆页面</a>
            <a href="#/register">注册页面</a>
            <div id="contain">
                
            </div>
        </div>
    </body>
    <script>
        if ("onhashchange" in window) {
            // 该浏览器支持 hashchange 事件!
            window.addEventListener("hashchange", funcRef, false);
        }
        var ele = document.getElementById('contain');

        function funcRef() {
            var localHash = location.hash;
            switch (localHash) {
                case '#/login':
                    ele.innerHTML = "<h1>登陆页面</h1>"
                    break;
                case '#/register':
                    ele.innerHTML = "<h1>注册页面</h1>"
                    break;
                default:
                    break;
            }
            console.log()
        }
    </script>
</html>