首页 > 其他分享> > vue-router 原理（1）

vue-router 原理（1）

2019-03-21 22:39:52 作者：互联网

　hashchange

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

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

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

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

<!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>

标签：vue,hash,window,ele,hashchange,原理,router,funcRef,页面
来源： https://www.cnblogs.com/xqzi/p/10575265.html