vue路由原理 #22

Wscats · 2018-12-03T13:05:09Z

hashchange

现在大部分单页面应用程序的路由切换都是以下这种方式

http://www.xxx.com/#/index

这种 #。后面 hash 值的变化，并不会导致浏览器向服务器发出请求，浏览器不发出请求，也就不会刷新页面。另外每次 hash 值的变化，还会触发 hashchange 这个事件，通过这个事件我们就可以知道 hash 值发生了哪些变化。然后我们便可以监听 hashchange 来实现更新页面部分内容的操作

<body>
    <a href="#/index">index</a>
    <a href="#/home">home</a>
    <script>
        function matchAndUpdate() {
            // 匹配 hash 做 dom 更新操作
            console.log("路由切换了");
        }
        window.addEventListener('hashchange', matchAndUpdate)
    </script>
</body>

示例

哈希路由的简单实现

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

vue路由原理 #22

vue路由原理 #22

Wscats commented Dec 3, 2018 •

edited

Loading

vue路由原理 #22

vue路由原理 #22

Comments

Wscats commented Dec 3, 2018 • edited Loading

hashchange

示例

Wscats commented Dec 3, 2018 •

edited

Loading