前端路由原理

一.路由底层实现方式

1.利用监听hash变化


    a
    b
 
    

浏览器会监听对应的变化

2.利用HTML5 模式的History


    a
    b
 
    
  
image

浏览器地址自动改变,并且不会带有#号

两种模式对比

  1. Hash 模式只可以更改 # 后面的内容,History 模式可以通过 API 设置任意的同源 URL
  2. History 模式可以通过 API 添加任意类型的数据到历史记录中,Hash 模式只能更改哈希值,也就是字符串
  3. Hash 模式无需后端配置,并且兼容性好。History 模式在用户手动输入地址或者刷新页面的时候会发起 URL 请求,后端需要配置 1index.html 页面用于匹配不到静态资源的时候

二、简易版哈希方式实现路由





    
    
    
    原生模拟 Vue 路由切换
    



    
    

你可能感兴趣的:(前端路由原理)