hash路由和history路由

最新推荐文章于 2024-07-18 20:54:54 发布

学不会前端

最新推荐文章于 2024-07-18 20:54:54 发布

阅读量116

点赞数 3

文章标签： javascript css

本文链接：https://blog.csdn.net/qq413142634/article/details/139400986

版权

hash路由

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

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

<body>
  <ul style="display: 
  flex;justify-content: 
  space-around;
  list-style: none;
  width: 200px;">
    <li style="border: 1px solid pink; width: 100px;text-align: center;margin: 0 10px;">home</li>
    <li style="border: 1px solid pink; width: 100px;text-align: center;margin: 0 10px;">about</li>
  </ul>
  <h1></h1>
  <script>
    const ulElement = document.querySelector('ul');

    const handleClick = (event) => location.hash = event.target.innerText;

    ulElement.addEventListener("click", handleClick);

    if (!location.hash) location.hash = 'home';

    ulElement.nextElementSibling.innerHTML = location.hash;

    window.onhashchange = () => ulElement.nextElementSibling.innerText = location.hash


  </script>
</body>

</html>

history路由

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

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

<body>
  <ul style="display: 
  flex;justify-content: 
  space-around;
  list-style: none;
  width: 200px;">
    <li style="border: 1px solid pink; width: 100px;text-align: center;margin: 0 10px;">home</li>
    <li style="border: 1px solid pink; width: 100px;text-align: center;margin: 0 10px;">about</li>
  </ul>
  <h1></h1>
  <script>
    const ulElement = document.querySelector('ul');

    ulElement.addEventListener('click', handleClick);

    function handleClick(event) {

      history.pushState({ page: event.target.innerText }, '', event.target.innerText);

      ulElement.nextElementSibling.innerText = location.pathname;

    }
    // history.pushState() history.replaceState() 修改pathname需要在服务环境
    if (location.pathname === "/") history.pushState({ page: '/home' }, '', '/home');

    ulElement.nextElementSibling.innerText = location.pathname;

    window.onpopstate = () => ulElement.nextElementSibling.innerText = location.pathname;

  </script>
</body>

</html>