Skip to content

vue路由原理 #22

@Wscats

Description

@Wscats

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>

示例

哈希路由的简单实现

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions