js实现前端hash,history路由

最新推荐文章于 2024-06-03 14:15:04 发布

考拉菜鸟

最新推荐文章于 2024-06-03 14:15:04 发布

阅读量384

点赞数

分类专栏： vue 文章标签： js 路由 vue.js

原文链接：https://mp.weixin.qq.com/s/Xh684JdDlpyzuPy6VZQRXQ

版权

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

js实现hash路由

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #routerView {
      width: 100px;
      height: 100px;
      background-color: #ff0
    }
  </style>
</head>
<body>
  <div>
     <a href="#/home">Home</a>
    <a href="#/about">About</a>
  </div>
 
  <div id="routerView" >
  </div>

  <script>

    var routerView = null; 

    var onDomContentLoadedHandle = () => {
      routerView = document.getElementById('routerView');
      // 页面加载完不会触发 hashchange，这里主动触发一次 hashchange 事件
      onHashChangeHandle()
    }
    // 当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完全加载。
    window.addEventListener('DOMContentLoaded', onDomContentLoadedHandle);


    var onLoadHandle = ()=>{
      console.log(222);
    }
    //在文档装载完成后会触发  load 事件。此时，在文档中的所有对象都在DOM中，所有图片，脚本，链接以及子框都完成了装载。 
    window.addEventListener('load', onLoadHandle)

    var onHashChangeHandle = (v) => {
      // console.log(v.oldURL);
      // console.log(v.newURL);
      let hash = location.hash;
      console.log('hash', hash);
      switch (hash) {
        case '#/home':
          routerView.innerHTML = 'Home'
          return;
        case '#/about':
          routerView.innerHTML = 'About'
          return;      
        default:
          break;
      }
    }

    // 监听url中hash改变事件
    window.addEventListener('hashchange', onHashChangeHandle)

    window.addEventListener('beforeunload', () => {
      window.removeEventListener('hashchange', onHashChangeHandle);
      window.removeEventListener('DOMContentLoaded', onDomContentLoadedHandle);
      window.removeEventListener('load', onLoadHandle)
    })
  </script>
</body>
</html>

js实现history路由

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #routerView {
      width: 100px;
      height: 100px;
      background-color: #ff0
    }
  </style>
</head>
<body>
  <div>
     <a href="/home">Home</a>
    <a href="/about">About</a>
  </div>
 
  <div id="routerView" >
  </div>

  <script>

    var routerView = null; 

    var onDomContentLoadedHandle = () => {
      routerView = document.getElementById('routerView')
      onPopStateHandle();

      const linkList = document.querySelectorAll('a[href]');

      // 注册，拦截 点击事件，实现url变化，同时手动触发页面ui改变
      linkList.forEach(el => {
        el.onclick = (e) => {
          e.preventDefault();

          const path = el.getAttribute('href');
          history.pushState({name: path}, path.slice(1), path)
          onPopStateHandle()
        }
      })
    }
    // 当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完全加载。
    window.addEventListener('DOMContentLoaded', onDomContentLoadedHandle);



    var onPopStateHandle = (v) => {     
      let path = location.pathname;
      // console.log('path', path);
      switch (path) {
        case '/home':
          routerView.innerHTML = 'Home'
          return;
        case '/about':
          routerView.innerHTML = 'About'
          return;      
        default:
          break;
      }
    }

    // 监听url中hash改变事件
    window.addEventListener('popstate', onPopStateHandle)

    window.addEventListener('beforeunload', () => {
      window.removeEventListener('popstate', onPopStateHandle);
      window.removeEventListener('DOMContentLoaded', onDomContentLoadedHandle);
    })
  </script>
</body>
</html>

考拉菜鸟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js实现前端hash,history路由

js实现hash路由<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>
复制链接

扫一扫