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


相关文章
|
3天前
|
JavaScript 前端开发 搜索推荐
vue -- 单页面应用和多页面应用区别及优缺点
vue -- 单页面应用和多页面应用区别及优缺点
64 0
|
7月前
|
存储 JavaScript 算法
Vue中如何实现动态路由
Vue中如何实现动态路由
64 1
|
8月前
|
JavaScript 前端开发
前端经典面试题 | Vue组件间的通信方式
前端经典面试题 | Vue组件间的通信方式
|
3天前
|
JavaScript 前端开发 API
< 简述 “ 尤大 ” 的 Vue3 相比 Vue 2 的区别 >
vue2 向 vue3 的变更! Vue 3在2018年末开始规划,旨在利用ES6特性,解决Vue 2的性能和架构问题。Vue 3的核心改进包括:更快的速度(重写虚拟DOM,优化编译和组件初始化)、更小的体积(借助tree-shaking优化打包)、更好的维护性(引入组合式API以提高代码复用和可维护性)、拥抱TypeScript以及更接近原生的自定义渲染API。此外,Vue 3还引入了Fragments、Teleport、createRenderer等新功能,同时对全局API、模板指令、组件和渲染函数进行了调整或移除,以提高兼容性和性能。
< 简述 “ 尤大 ” 的 Vue3 相比 Vue 2 的区别 >
|
3天前
|
JavaScript 网络架构
vue中动态路由是什么该如何实现
vue中动态路由是什么该如何实现
11 1
|
3天前
|
开发框架 JavaScript 小程序
vue和小程序的异同
vue和小程序的异同
11 0
|
3天前
|
JavaScript 前端开发 搜索推荐
Vue的路由实现:hash模式 和 history模式原理
Vue的路由实现:hash模式 和 history模式原理
48 0
|
3天前
|
开发框架 小程序 JavaScript
vue和小程序的异同之处
vue和小程序的异同之处
54 0
|
7月前
|
存储 JavaScript 前端开发
Vue组件通信原理及应用场景解析
Vue组件通信原理及应用场景解析
107 1
|
9月前
|
存储 JavaScript 对象存储
深入vue2.0源码系列: 指令的实现原理与实现方式
深入vue2.0源码系列: 指令的实现原理与实现方式
83 0