哈西路由跳转实现

最新推荐文章于 2024-04-20 21:30:33 发布

srTres

最新推荐文章于 2024-04-20 21:30:33 发布

阅读量1.9k

点赞数 2

文章标签： javascript html html5 es6

本文链接：https://blog.csdn.net/srTres/article/details/109414106

版权

前面已经实现h5的history路由跳转，这里是另一种哈西路由

<!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>
    <div>
      <a href="#/">首页</a>
      <a href="#/home">home</a>
      <a href="#/about">about</a>
      <div id="root"></div>
    </div>
</body>
<script>

  class Router {
    constructor({route}) {
      this.route = route;
      this.root = document.getElementById('root');
      this.init()
    }
    init() {
      // hashchange事件监听url#/的变化
      window.addEventListener('hashchange', () => {
        let topath = window.location.hash.slice(1)
        this.updateDom(topath)
      })
      // 监听浏览器刷新
      window.addEventListener('load', () => {
        let topath = window.location.hash.slice(1);
        this.updateDom(topath)
      })
    }
    updateDom(topath) {
      let Iner = this.route.filter(item => item.path === topath)[0].component;
      this.root.innerHTML = Iner
    }
  }

  new Router({
    route: [
      {
        path: '/',
        component: '首页'
      },
      {
        path: '/home',
        component: 'home'
      },
      {
        path: '/about',
        component: 'about'
      }
    ]
  })
</script>
</html>

srTres

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
6
评论
哈西路由跳转实现

前面已经实现h5的history路由跳转，这里是另一种哈西路由<!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><
复制链接

扫一扫