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

最新推荐文章于 2024-06-14 15:08:43 发布

lql_h

最新推荐文章于 2024-06-14 15:08:43 发布

阅读量3k

点赞数 1

分类专栏： VUE

本文链接：https://blog.csdn.net/lql_h/article/details/102513399

版权

VUE 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

概述

哈希模式（利用`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>

运行效果

lql_h

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Vue路由跳转原理（哈希模式）

概述哈希模式（利用`hashchange` 事件监听 url的hash 的改变）```window.addEventListener('hashchange', function(e) { console.log(e)})```核心是锚点值的改变，我们监听到锚点值改变了就去局部改变页面数据，不做跳转。跟传统开发模式url改变后立刻发起请求，响应整个页面，渲染整个页面...
复制链接

扫一扫