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改变。


相关文章
|
存储 JavaScript 算法
Vue中如何实现动态路由
Vue中如何实现动态路由
111 1
|
2月前
|
JavaScript 网络架构
Vue中实现分布式动态路由:基础步骤详解
Vue中实现分布式动态路由:基础步骤详解
33 2
|
2月前
|
JavaScript 前端开发 应用服务中间件
Vue开发中,在实现单页面应用(SPA)前端路由时的hash模式和history模式的区别及详细介绍
Vue开发中,在实现单页面应用(SPA)前端路由时的hash模式和history模式的区别及详细介绍
43 0
|
3月前
|
移动开发 前端开发 应用服务中间件
React两种路由模式的实现原理
React两种路由模式的实现原理
106 3
|
4月前
|
JavaScript 前端开发 搜索推荐
Vue 路由的hash模式和history模式有什么区别?
在Vue.js框架中,路由管理是单页面应用(SPA)不可或缺的功能。Vue 路由提供了两种模式:hash模式和history模式,这两种模式主要负责处理URL的变更而无需重新加载整个页面,实现前端路由的功能。
244 19
|
4月前
|
存储 JavaScript 容器
【Vue面试题十一】、Vue组件之间的通信方式都有哪些?
这篇文章介绍了Vue中组件间通信的8种方式,包括`props`传递、`$emit`事件触发、`ref`、`EventBus`、`$parent`或`$root`、`attrs`与`listeners`、`provide`与`inject`以及`Vuex`,以解决不同关系组件间的数据共享问题。
|
4月前
|
监控 JavaScript API
Vue3 高阶方法及使用场景,看这一篇就够啦!!【最全】
Vue3 高阶方法及使用场景,看这一篇就够啦!!【最全】
|
7月前
|
JavaScript 网络架构
vue中动态路由是什么该如何实现
vue中动态路由是什么该如何实现
41 1
|
7月前
|
JavaScript 前端开发 搜索推荐
Vue的路由实现:hash模式 和 history模式原理
Vue的路由实现:hash模式 和 history模式原理
130 0
|
存储 JavaScript 对象存储
深入vue2.0源码系列: 指令的实现原理与实现方式
深入vue2.0源码系列: 指令的实现原理与实现方式
134 0