Hash路由的简单算法

最新推荐文章于 2024-08-15 16:09:23 发布

子凡的代码日志

最新推荐文章于 2024-08-15 16:09:23 发布

阅读量290

点赞数 4

文章标签：算法哈希算法 java

本文链接：https://blog.csdn.net/yzf_1119/article/details/140936176

版权

我们看一下这个题目要求

<a href="#/">首页</a>
<a href="#/list">列表</a>
<a href="#/my">我的</a>
<div class="view"></div>
<script>
// 补全以下代码  使view盒子中的内容与你的路由同时变化
   class HashRouter {
           // 你的代码
   }

   new HashRouter({
       routes: [
           {
               path: '/',
               component: '首页'
           },
           {
               path: '/list',
               component: '列表'
           },
           {
               path: '/my',
               component: '我的'
           }
       ]
   })
</script>

很明显这就是一个简单的哈希路由跳转内容跟随改变

那么我们可以这样写

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <a href="#/">首页</a>
    <a href="#/list">列表</a>
    <a href="#/my">我的</a>
    <div class="view"></div>
    <script>
        let div = document.querySelector('.view')
        class HashRouter {
            constructor({ routes }) {
                // 初始化路由
                this.routes = routes
                // 渲染页面
                this.render()
                // 监听hashchange事件
                window.addEventListener('hashchange', () => {
                    // 更新页面
                    this.render()
                })
            }
            // 更新页面
            render() {
                // 获取hash值
                // 切割hash值，获取路径
                let path = location.hash.slice(1) || '/'
                // 根据路径查找组件
                let component = this.routes.find(item => item.path === path)
                // 如果找到了组件，则渲染组件
                div.innerHTML = component.component
            }
        }

        new HashRouter({
            routes: [
                {
                    path: '/',
                    component: '首页'
                },
                {
                    path: '/list',
                    component: '列表'
                },
                {
                    path: '/my',
                    component: '我的'
                }
            ]
        })
    </script>
</body>

</html>

这样一个简单的哈希路由算法就写完了你学会了吗