原生JS路由实现页面跳转

最新推荐文章于 2024-03-05 09:15:36 发布

JBIB

最新推荐文章于 2024-03-05 09:15:36 发布

阅读量573

点赞数 6

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/2301_79354153/article/details/136073071

版权

原生JS路由
原生JS路由学习地址

JavaScript SPA Router (原生JS路由)_哔哩哔哩_bilibili

写JS原生路由时可从以下几个方面入手
监听a标签，并给href里的url加锚点链接
一般情况下菜单栏的加载模式中，都是通过<a>中的href='/xxxx’来跳转到指定的页面，所以路由的第一步就是监听到此菜单栏中<a href='/xxx'>的点击事件，并在点击时通过event.preventDefault()阻止浏览器的默认行为。阻止默认行为后，咱们就可以通过#/index这种形式给拿到的url加锚

监听hashchange事件，并在监听被触发时加载对应的页面
通过hashchange函数来监听加了锚之后的url（即hash）,监听到hash的变化后，我们可以拿到点击时的url，通过调用Router(params)时传入的params参数来找到此文件的静态路径，然后传入到iframe
的 src中。

在Router调用时添加目标容器，添加首页加载
在这个例子中使用的内容容器是个iframe，所以我需要考虑多个iframe嵌套下的Loader目标(target)问题，当然，首页也是需要可以设置默认加载的。

代码示例：
1.html文件


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="description">
  <title>Document</title>
  <style>
    @import url('https://fonts.googleapis.com/css?family=Montserrat:400,400i,700');
    a {
      text-decoration: none;
      background: white;
      border-radius: 10px;
      padding: .5em 1em;
      font-weight: bold;
    }
    body {
      display: grid;
      grid-template-columns: auto 1fr;
      min-height: 100vh;
      margin: 0;
      font-family: 'Montserrat';
    }
    nav {
      display: flex;
      flex-direction: column;
      background: #f1f1f1;
      padding: 3.2rem 1rem;
      gap: 1rem;
    }
    #root {
      padding: 2rem;
      max-width: min(75ch, 90%);
      margin-inline: auto;
    }
  </style>
</head>
<body>
  <nav>
    <a href="/">Home</a>
    <a href="/about">About Us</a>
    <a href="/services">Our Services</a>
    <a href="/contact">Contact Us</a>
  </nav>
  <div id="root"></div>

  <script src="app.js"></script>
</body>
</html>

const siteTitle = 'A Fabulous Company'

const routes = {
  404: {
    page: '/pages/404.html',
    title: '404 | ' + siteTitle,
    description: 'Page not found'
  },
  '/': {
    page: '/pages/home.html',
    title: 'Home | ' + siteTitle,
    description: 'Home Page'
  },
  '/about': {
    page: '/pages/about.html',
    title: 'About Us | ' + siteTitle,
    description: 'About Us'
  },
  '/services': {
    page: '/pages/services.html',
    title: 'Our Services | ' + siteTitle,
    description: 'Our Services'
  },
  '/contact': {
    page: '/pages/contact.html',
    title: 'Contact Us | ' + siteTitle,
    description: 'Contact Us'
  }
}

document.querySelector('nav').addEventListener('click', (e) => {
  if (e.target.matches('a')) {
    e.preventDefault()
    useRoute()
  }
})

const useRoute = (e) => {
  e = e || window.event
  e.preventDefault()
  window.history.pushState({page: window.location.pathname}, '', e.target.href)
  renderPage()
}

const renderPage = async () => {
  const location = window.location.pathname
  const route = routes[location] || routes[404]
  const response = await fetch(route.page)
  const data = await response.text()
  document.querySelector('#root').innerHTML = data
  document.title = route.title
  document.querySelector('meta[name="description"]')
    .setAttribute('content', route.description)
}

window.onpopstate = renderPage
window.useRoute = useRoute
renderPage()

JBIB

关注

6
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
原生JS路由实现页面跳转

一般情况下菜单栏的加载模式中，都是通过中的href='/xxxx’来跳转到指定的页面，所以路由的第一步就是监听到此菜单栏中的点击事件，并在点击时通过event.preventDefault()阻止浏览器的默认行为。通过hashchange函数来监听加了锚之后的url（即hash）,监听到hash的变化后，我们可以拿到点击时的url，通过调用Router(params)时传入的params参数来找到此文件的静态路径，然后传入到iframe。原生JS路由学习地址。
复制链接

扫一扫