vue-router原理以及两种模式区别

简介: vue-router原理以及两种模式区别

题目


路由有哪两种模式?默认是哪种模式? 两种模式区别是什么? 讲一下vue-router原理?


答案


前端路由有两种模式,history和hash。默认是hash模式。


这两种模式有几个主要区别 1. history模式的路由没有"#"字符,而是在域名后直接写路径,更加优雅 2. 由于#后面的字符不会发给服务器,因此hash路由SEO比较差 3. history需要服务器在访问不同的路径时候都能fallback到index.html,因此相对麻烦


前端路由的原理关键有2点 1. 可以修改url,但不会引起刷新,从而在不刷新的页面的情况下跳转路由。 2. 监听url改变,根据url渲染对应组件。


hash模式和history模式的原理都是基于这两点。hash是通过浏览器提供的location API修改url,通过onhashchange方法监听hash改变;history通过浏览器提供的history.pushState或者history.replacestate修改url,通过popState事件监听url改变。


相关文章
|
前端开发 搜索推荐 UED
解密前端路由: hash模式vs.history模式
解密前端路由: hash模式vs.history模式
|
前端开发 JavaScript 安全
【面试题】路由的两种模式:hash模式和 history模式
【面试题】路由的两种模式:hash模式和 history模式
286 1
|
11月前
|
JavaScript 前端开发 应用服务中间件
Vue开发中,在实现单页面应用(SPA)前端路由时的hash模式和history模式的区别及详细介绍
Vue开发中,在实现单页面应用(SPA)前端路由时的hash模式和history模式的区别及详细介绍
383 0
|
11月前
|
前端开发 小程序 JavaScript
面试官:px、em、rem、vw、rpx 之间有什么区别?
面试官:px、em、rem、vw、rpx 之间有什么区别?
289 0
|
JSON JavaScript 安全
JS深浅拷贝
本文介绍了JavaScript中实现数据拷贝的四种方法:`Object.assign()`, 扩展运算符(`...`), `JSON.parse(JSON.stringify())` 和递归深拷贝。`Object.assign()`及扩展运算符对基本数据类型进行深拷贝,而对引用类型则进行浅拷贝。`JSON.parse(JSON.stringify())`对所有类型的数据都执行深拷贝,但存在一些限制如日期类型被转为字符串等。递归深拷贝则避免了这些问题,并支持循环引用,是一种更安全的选择。
413 0
JS深浅拷贝
|
JavaScript
【Vue面试题八】、为什么data属性是一个函数而不是一个对象?
这篇文章解释了为什么在Vue中组件的`data`属性必须是一个函数而不是一个对象。原因在于组件可能会有多个实例,如果`data`是一个对象,那么这些实例将会共享同一个`data`对象,导致数据污染。而当`data`是一个函数时,每次创建组件实例都会返回一个新的`data`对象,从而确保了数据的隔离。文章通过示例和源码分析,展示了Vue初始化`data`的过程和组件选项合并的原理,最终得出结论:根实例的`data`可以是对象或函数,而组件实例的`data`必须为函数。
【Vue面试题八】、为什么data属性是一个函数而不是一个对象?
|
缓存 前端开发 JavaScript
理解 React 的 Fiber 架构
【8月更文挑战第6天】 理解 React 的 Fiber 架构
730 1
|
前端开发 JavaScript
js 打开资源管理器(经典范例:纯前端选择并预览图片)
js 打开资源管理器(经典范例:纯前端选择并预览图片)
221 0
|
前端开发
Promise和async/await之间有什么区别
Promise与async/await是异步编程的两种模式。Promise使用.then()和.catch()处理回调,语法较复杂,易出现回调地狱;而async/await提供更清晰的顺序代码,使用try/catch进行错误处理,使异步操作更易读、易维护。Promise在控制流和错误堆栈方面较为灵活,但定位错误难,而async/await自动等待、线性控制流,错误堆栈清晰。两者各有优势,选择取决于具体需求和偏好。