当前位置: 首页 > 面试题库 >

前端路由指的是什么?它有什么好处?它有哪些方式可以实现呢?

惠翰藻
2023-03-14
本文向大家介绍前端路由指的是什么?它有什么好处?它有哪些方式可以实现呢?相关面试题,主要包含被问及前端路由指的是什么?它有什么好处?它有哪些方式可以实现呢?时的应答技巧和注意事项,需要的朋友参考一下

spa(单页)应用
本质就是根据url变化动态切换组件展示

有hash和histrory 模式
url组成部分中 '#' 号 开始的内容称为hash值,以前是用来做页面滚动锚点的
浏览器提供了 window.history的 replaceState/pushState 2个函数,可以做到改动url 而浏览器不刷新

hash的兼容性较好,histroy在某些安卓低版本上不能用,像vue-router就会回退到hash模式
而此时路由会展示默认页面 就是 path: / 对应的页面,那么可以在默认页面中判断$router.mode === $router.option.mode 来确定是否是回退hash了,回退了用$router.replace切一次即可

原理:跑正则匹配配置的url确定要展示的组件
监控url变化事件:
history 根据window的popstate事件
hash 模式根据window的 hashchange/popstate 事件

好处看和谁比:
和iframe比就是加载资源少,白屏时间短,状态共享无障碍
坏处很明显,项目大了不好切成小项目维护,所以现在微前端方案层出不穷

 类似资料:
  • 本文向大家介绍python 什么是lambda表达式?它有什么好处?相关面试题,主要包含被问及python 什么是lambda表达式?它有什么好处?时的应答技巧和注意事项,需要的朋友参考一下 简单来说,lambda表达式通常是当你需要使用一个函数,但是又不想费脑命名一个函数的时候使用,也就是通常所说的匿名函数

  • 本文向大家介绍举例说明什么是IIFEs?它有什么好处?相关面试题,主要包含被问及举例说明什么是IIFEs?它有什么好处?时的应答技巧和注意事项,需要的朋友参考一下 Instantly Invoked Function Expression 即时调用函数表达式 示例 最好在 IIFE 前追加分号 来避免解析时与前一个表达式合并出现问题 好处 创建一个局部作用域隔离变量;但在 ES6 拥有了块级作用域

  • 本文向大家介绍contextType是什么?它有什么用?相关面试题,主要包含被问及contextType是什么?它有什么用?时的应答技巧和注意事项,需要的朋友参考一下 定义当前组件要使用哪一个context

  • 本文向大家介绍childContextTypes是什么?它有什么用?相关面试题,主要包含被问及childContextTypes是什么?它有什么用?时的应答技巧和注意事项,需要的朋友参考一下 childContextTypes用来定义context数据类型,该api从16.3开始已被废弃 使用方式

  • 本文向大家介绍flex与其他有什么不同,用它有什么好处?相关面试题,主要包含被问及flex与其他有什么不同,用它有什么好处?时的应答技巧和注意事项,需要的朋友参考一下 flex 从根本上不同于之前常用的借助 定位、浮动 的布局。从逻辑思路上来说,flex 布局具有宏观性,提供了一种对于页面中元素如何排布的框架,开发者不需要关注细节和进行额外的操作,就能使得一系列元素按约定的规则排列。而之前常用的借

  • 本文向大家介绍你知道什么是PAJAX吗?它和AJAX有什么区别?它的应用场景有哪些?相关面试题,主要包含被问及你知道什么是PAJAX吗?它和AJAX有什么区别?它的应用场景有哪些?时的应答技巧和注意事项,需要的朋友参考一下 1.Pajax是jQuery的一个插件,Pjax即pushState + Ajax,是实现无刷新Ajax加载并解决浏览器前进和后退问题的一个开源实现。 2.pajax结合pus