当前位置: 首页 > news >正文

Vue2面试题:说一下路由模式hash和history的区别?

    在单页面应用SPA中,路由描述的是URL与视图之间的映射关系,这种映射是单向的,即URL变化引起视图更新(无需刷新页面)。  

    1、hash模式

        原理:

            用 url + #后面的hash值 来模拟一个完整的url,直接刷新页面不会导致浏览器向服务器发出新的请求,路由切换时不会

            当调用$router.push方法,会改变hash值触发hashchange事件,前进到指定的url。vue-router会根据url做路由匹配来修改页面内容,实现路由切换的效果

            改变hash值触发hashchange事件,hashchange事件对象中会记录变化的url。点击浏览器的前进后退,会改变hash值,实现路由切换的效果

        特点:

            地址栏有#,影响美观,直接刷新页面不会报404

2、history模式

        原理:

            用 url + 路径 真正实现一个完整的url,直接刷新页面会导致浏览器向服务器发出新的请求,路由切换时不会

            当调用$router.push方法,会改变路径调用pushState方法,前进到指定的url。vue-router会根据url做路由匹配来修改页面内容,实现路由切换的效果

            改变路径调用pushState方法,pushState方法中会记录变化的url。点击浏览器的前进后退 或者 手动调back、forward、go方法,会触发popstate事件,实现路由切换的效果

        特点:

            地址栏没有#,不影响美观,直接刷新页面会报404,需要后端在Nginx中做代理地址的配置

相关文章:

  • JVM调优:参数(学习笔记)
  • vue表单输入绑定
  • 考研真题数据结构
  • 利用闭包与高阶函数实现缓存函数的创建
  • 如何部署自己的服务渲染页面为Pdf文档
  • Python:用python脚本,自动翻阅Andriod手机小说
  • EasyExcel处理表头的缓存设置
  • 如何处理好面试中的“压力测试”?
  • 全栈开发组合
  • 租一台服务器多少钱决定服务器的价格因素有哪些
  • cache教程 5.分布式节点的通信
  • 奥比中光 Femto Bolt相机ROS配置
  • 【经验分享】使用Ora2Pg迁移Oracle数据到openGauss
  • 理德外汇:美联储降息风潮没吹到欧洲,挪威更是意外加息
  • 计算机组成原理---浮点数的加减运算
  • FFmpeg之HWContextType
  • CommonJs模块化实现原理ES Module模块化原理
  • 2.cgal教程 Surface Reconstruction from Point Clouds
  • TypeScript入门实战笔记 -- 04 什么是字面量类型、类型推断、类型拓宽和类型缩小?
  • 第一章 Django基本使用
  • 海关总署统计分析司司长:4月进出口增速较一季度加快4.3个百分点
  • 巴基斯坦信德省卡拉奇发生爆炸
  • 杭温高铁、沪苏湖高铁明起推出定期票和计次票,不限车次执行优惠折扣
  • 公募基金改革八大要点:建立浮动管理费收取机制、降低规模排名考核权重
  • 网民反映“潜水时遭遇服务质量不佳”,三亚开展核查调查
  • 马上评|颜宁“简历打假”的启示