Vue路由跳转原理（哈希模式）

最新推荐文章于 2025-10-13 22:42:36 发布

原创最新推荐文章于 2025-10-13 22:42:36 发布 · 3.1k 阅读

3 ·

CC 4.0 BY-SA版权

VUE 专栏收录该内容

20 篇文章

订阅专栏

本文深入探讨了哈希模式路由的实现原理，通过监听URL的hash变化，局部更新页面内容，提升用户体验。示例代码展示了如何使用`hashchange`事件进行页面切换。

概述

哈希模式（利用`hashchange` 事件监听 url的hash 的改变）

```

window.addEventListener('hashchange', function(e) {

console.log(e)

})

```

核心是锚点值的改变，我们监听到锚点值改变了就去局部改变页面数据，不做跳转。跟传统开发模式url改变后立刻发起请求，响应整个页面，渲染整个页面比路由的跳转用户体验更好

代码

<!DOCTYPE html>

<html>

<head>

    <title></title>

</head>

<body>

    <a href="#/login">登录</a>

    <a href="#/register">注册</a>

    <div id="app"></div>

    <script type="text/javascript">

       var appdiv=document.getElementById('app')

       window.addEventListener('hashchange', function(e) {

             console.log(location.hash)

             switch(location.hash){

               case '#/login':

               appdiv.innerHTML='我是登录页面';

               break;

               case '#/register':

               appdiv.innerHTML='我是注册页面';

               break;

             }

           })

    </script>

</body>

</html>