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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。