SPA设计-前端路由原理

灵感来源：铁狮子-前端组件化

SPA设计

1. 前后端分离
2. 减轻服务器压力
3. 增加用户体验
4. Prerender 预渲染优化SEO

工作原理

可以执行打开操作，可以操作历史记录，通过前进，后退可回到任何一个步骤的网页

History API

1. pushState 创建一个历史记录
2. onpopstate 用于响应浏览器的前进后退，History 改变时触发

   

Hash

1. location.hash url的hash属性
2. hashchange 监听，页面地址的变化

   

代码演示

History

// <a class="api a"> a.html</a>
// <a class="api b"> b.html</a>

// 注册路由,监听点击事件
document.querySelectorAll('.api').forEach(item => {
  item.addEventListener('click', (e) => {
    e.preventDefault(); //阻止默认事件
    let link = item.textContent;
    // 创建历史记录，（自定义参数，title，地址）
    window.history.pushState({ name: 'api' }, link, link)
  }, false)
})

// 监听路由
window.addEventListener('popstate', (e) => {
  console.log({
    location: location.href,
    state: e.state
  })
})

Hash

// Hash
// <a class="hash a">hash a</a>  
// <a class="hash b">hash b</a>

// 注册路由,监听点击事件
document.querySelectorAll('.hash').forEach(item => {
  item.addEventListener('click', (e) => {
    e.preventDefault(); //阻止默认事件
    let link = item.textContent;
    location.hash = link;

  }, false)
})

// 监听路由
window.addEventListener('hashchange', (e) => {
  console.log({
    location: location.href,
    hash: location.hash
  })
})

闲话

本来对博客持有一种如果别人写过那么再写就没有意义的想法，想看的时候看别人的写好的文章不就好了吗？
最近明白了，写博客也是一种学习，哪怕与人雷同哪怕千篇一律，只要自己动手，有所收获就不亏。
如果还能帮到其他小伙伴，那就更好！