当前位置：首页 > article >正文

html 单页面路由模式hash和history

article 2024/11/14 18:34:38

文章目录

- Hash 模式
- H5的history模式

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>
</head>
<body>
  <nav class="nav-box">
    <a href="#/">首页</a>
    <a href="#/about">关于</a>
    <a href="#/product">产品</a>
  </nav>

  <div id="app"></div>

  <script>
    const app = document.querySelector('#app')
    const navBox = document.querySelector('.nav-box')

    const routes = [
      {
        path: '/',
        component: '组件-首页home' // 应是组件
      },
      {
        path: '/about',
        component: '组件-关于我们'
      },
      {
        path: '/product',
        component: '组件-产品列表'
      }
    ]
    
    const routeMatch = () => {
      const hash = location.hash.substring(1) // 去掉hash的 #
      let text = ''
      routes.forEach(it => {
        if(it.path === hash) text = it.component
      })
      app.innerHTML = text
    }

    // 首次渲染 /
    location.hash = '/'
    routeMatch()
    // 监听 hash 变化
    window.onhashchange = routeMatch
  </script>
</body>
</html>

H5的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>
</head>
<body>
  <nav class="nav-box">
    <a href="/">首页</a>
    <a href="/about">关于</a>
    <a href="/product">产品</a>
  </nav>

  <div id="app"></div>

  <script>
    const app = document.querySelector('#app')
    const navBox = document.querySelector('.nav-box')

    const routes = [
      {
        path: '/',
        component: '组件-首页home' // 应是组件
      },
      {
        path: '/about',
        component: '组件-关于我们'
      },
      {
        path: '/product',
        component: '组件-产品列表'
      }
    ]
    
    // 事件委托，点击事件
    navBox.onclick = (event) => {
      if(event.target.tagName === 'A') {
        event.preventDefault() // 阻止默认事件，跳转并刷新
        // Failed to execute 'pushState' on 'History': A history state object with URL ' cannot be created in a document with origin 'null' and URL '
        history.pushState({}, '', event.target.href)
        routeMatch()
      }
    }

    const routeMatch = () => {
      const pathname = location.pathname
      let text = ''
      routes.forEach(it => {
        if(it.path === pathname) text = it.component
      })
      app.innerHTML = text
    }

    // 首次渲染 /
    history.pushState(null, '', '/')
    routeMatch()

    // 监听popstate地址变化事件; 执行go/forward/back等方法可以触发
    window.onpopstate = routeMatch

  </script>
</body>
</html>