Vue(Vue2+Vue3)——75.路由器的两种工作模式(history和hash)

简介: Vue(Vue2+Vue3)——75.路由器的两种工作模式(history和hash)

75 路由器的两种工作模式(history和hash)


整个路由器一共有两种工作模式。默认开启的就是hash工作模式,特点就是#号,还有另外一种工作模式就是history工作模式


hash(#号)


这个#号,官方称之为hash,从#号开始到#号后面所有的东西都算作路径里面的hash值

hash值最大的特点就是不会随着http请求发给服务器,hash值以后的路径不会作为作为路径的一部分

比如我这里有一个请求:http://localhost:9090/queryUserInfo

直接访问肯定是没有问题的

这时候我随便写点hash值,可以看到还是可以访问的

但是如果去掉hash值,就 访问不了了,这就是hash值不会介入路径拼接



history工作模式


相比于hash模式,最大的特点就是没有#号


更改路由工作模式(mode)


如果想要开启history工作模式,可以在配置路由的时候通过mode修改:

这时候再开启一个新的页面,发现#号消失了

可以发现,history模式比hash模式更美观


区别


url地址不同,hash有#号不美观,history没有#号更加美观

虽然#丑,但是兼容性好,history虽然好看,但是兼容性略差

这还涉及到一个项目上线的问题

项目上线的时候需要使用npm run build命令把vue项目打包称纯粹的html.css.js,主要打包src和public目录下的东西

打开终端,输入:

npm run build

打包的速度取决于项目的大小和硬盘读写速度

打包完之后,就出现了一个dist文件夹,里面含有页签图片以及js,css,html文件

打包完成后必须放到服务器上进行部署


总结


  1. 对于一个url来说,什么是hash值?—— #及其后面的内容就是hash值。
  2. hash值不会包含在 HTTP 请求中,即:hash值不会带给服务器。
  3. hash模式:
  1. 地址中永远带着#号,不美观 。
  2. 若以后将地址通过第三方手机app分享,若app校验严格,则地址会被标记为不合法。
  3. 兼容性较好。
  1. history模式:
  1. 地址干净,美观 。
  2. 兼容性和hash模式相比略差。
  3. 应用部署上线时需要后端人员支持,解决刷新页面服务端404的问题。

如果想使用history模式还不报404的错,最好是后端可以解决,如果前端解决可以使用node一些第三方库


相关文章
|
2月前
|
JavaScript 前端开发
在Vue2或Vue3中项目中使用 Isotope(同位素) 过滤和排序神奇的布局神器,全网独家实现!
本文介绍了在Vue2或Vue3项目中如何使用Isotope(同位素)布局库来创建动态的网格布局,并提供了详细的代码实现和效果展示,包括过滤和排序功能。
69 0
在Vue2或Vue3中项目中使用 Isotope(同位素) 过滤和排序神奇的布局神器,全网独家实现!
|
6天前
|
缓存 JavaScript 前端开发
「offer来了」从基础到进阶原理,从vue2到vue3,48个知识点保姆级带你巩固vuejs知识体系
该文章全面覆盖了Vue.js从基础知识到进阶原理的48个核心知识点,包括Vue CLI项目结构、组件生命周期、响应式原理、Composition API的使用等内容,并针对Vue 2与Vue 3的不同特性进行了详细对比与讲解。
「offer来了」从基础到进阶原理,从vue2到vue3,48个知识点保姆级带你巩固vuejs知识体系
|
6天前
|
API UED
如何实现Vue2项目升级Vue3?
如何实现Vue2项目升级Vue3?
13 1
|
9天前
|
JavaScript 前端开发 API
Vue2与Vue3插槽使用的区别及案例
Vue 3在插槽功能上的改进,体现了其对开发体验的持续优化。通过简化API、加强动态特性和提升性能,Vue 3使得插槽的使用更加灵活和高效。这些改进不仅有助于减轻开发者的负担,还为组件之间的高级交互和内容复用打开了新的可能性。随着Vue生态系统的不断成熟,我们有理由相信,Vue将继续为前端开发提供强大且易用的工具。
16 3
|
8天前
vue2的响应式原理学“废”了吗?继续观摩vue3响应式原理Proxy
该文章对比了Vue2与Vue3在响应式原理上的不同,重点介绍了Vue3如何利用Proxy替代Object.defineProperty来实现更高效的数据响应机制,并探讨了这种方式带来的优势与挑战。
vue2的响应式原理学“废”了吗?继续观摩vue3响应式原理Proxy
|
11天前
|
存储 缓存 JavaScript
Vue3比Vue2快在哪里?
本文分析了Vue 3相比Vue 2在性能提升的几个关键点,包括改进的diff算法、静态标记、静态提升、事件监听器缓存以及SSR渲染优化,这些改进使得Vue 3在处理大规模应用时更加高效。
15 1
|
21天前
|
JavaScript 索引
Vue 2和Vue 3的区别以及实现原理
Vue 2 的响应式系统通过Object.defineProperty来实现,它为对象的每个属性添加 getter 和 setter,以便追踪依赖并响应数据变化。
28 9
|
2月前
|
设计模式 JavaScript 前端开发
Vue.js组件设计模式:构建可复用组件库
在Vue.js中,构建可复用组件库是提升代码质量和维护性的核心策略。采用单文件组件(SFC),定义props及默认值,利用自定义事件和插槽进行灵活通信,结合Vuex或Pinia的状态管理,以及高阶组件技术,可以增强组件的功能性和灵活性。通过合理的抽象封装、考虑组件的可配置性和扩展性,并辅以详尽的文档和充分的测试,能够打造出既高效又可靠的组件库。此外,采用懒加载、按需导入技术优化性能,制定设计系统和风格指南确保一致性,配合版本控制、CI/CD流程和代码审查机制,最终形成一个高品质、易维护且具有良好社区支持的组件库。
54 7
|
2月前
|
设计模式 JavaScript 前端开发
Vue.js 组件设计模式:在前端热潮中找到归属感,打造可复用组件库,开启高效开发之旅!
【8月更文挑战第22天】Vue.js 以其高效构建单页应用著称,更可通过精良的组件设计打造可复用组件库。组件应职责单一、边界清晰,如一个显示文本并触发事件的按钮组件,通过 props 传递标签文本,利用插槽增强灵活性,允许父组件注入动态内容。结合 CSS 预处理器管理和封装独立模块,配以详尽文档,有效提升开发效率及代码可维护性。合理设计模式下,组件库既灵活又强大,持续实践可优化项目工作流。
44 1
|
1月前
|
JavaScript 前端开发 编译器
对Vue2 与 Vue3 的区别的理解
【9月更文挑战第3天】对Vue2 与 Vue3 的区别的理解
28 0
下一篇
无影云桌面