Vue路由中,history和hash两种模式有什么区别

简介: Vue路由中,history和hash两种模式有什么区别

hash【主要原理就是onhashchange()事件】

  • hash模式是开发中默认的模式,它的URL带着一个#
  • hash值会出现在URL地址里面,但是不会出现在http请求中,对后端完全没有影响,当然也不会重新请求页面
  • 低版本的浏览器支持这种模式的路由
  • hash路由被称为是前端路由,已经成为SPA的标配

history模式

  • history模式的URL中没有#,它是传统路由分发模式(就是用户输入一个url时候,服务器会接受这个请求,并解析这个URL,做出相应的逻辑处理)
  • hash模式更加好看,例如/id这种
  • history模式需要后台配置支持,如果后台没有正确配置,访问时会返回404
  • 修改历史状态:新增pushState()和replaceState()方法,这个方法应用于浏览器的历史记录栈,提供对历史记录进行修改的功能,只是当他们进行修改的时候,虽然修改url,但浏览器不会立即向后端发送请求,如果要做到改变url但又不刷新页面的效果,就需要前端用上两个API
  • 切换历史状态:forward() back() go(),前进,后退,跳转
  • 刷新页面的时候,如果没有相应的路由或资源,就会刷出404



相关文章
|
12天前
|
JavaScript 前端开发 API
前端框架与库 - Vue.js 组件与路由
【7月更文挑战第15天】Vue.js 框架以简洁API和高效DOM更新著名,组件和路由是构建应用的关键。组件是自包含的实例,常见问题包括命名冲突、作用域混淆和状态管理。要避免这些问题,可使用命名空间、明确数据绑定和事件,以及采用Vuex管理状态。Vue Router提供声明式路由,常见挑战包括路由守卫、动态路由参数和懒加载配置。正确使用路由守卫、处理动态参数和实现代码分割能优化路由管理。提供的代码示例展示了基本组件和路由配置。
|
15天前
【vue3】Argumnt of type ‘history:RouterHistory;}is not assignable to paraeter of type ‘RouterOptions‘.
【vue3】Argumnt of type ‘history:RouterHistory;}is not assignable to paraeter of type ‘RouterOptions‘.
10 0
|
15天前
|
JavaScript
【vue3】vue3中路由hash与History的设置
【vue3】vue3中路由hash与History的设置
18 0
|
15天前
|
JavaScript
【vue】 vue如何根据不同路由地址更改页面的标题
【vue】 vue如何根据不同路由地址更改页面的标题
7 0
|
15天前
|
JavaScript
【vue】 vue中判断路由变化 | 监听路有变化
【vue】 vue中判断路由变化 | 监听路有变化
17 0
|
2天前
|
缓存 JavaScript 算法
|
1天前
|
JavaScript
vue知识点
vue知识点
8 2
|
6天前
|
存储 JavaScript API
Vue 全局状态管理新宠:Pinia实战指南
 随着Vue.js项目的日益复杂,高效的状态管理变得至关重要。Pinia作为Vue.js官方推荐的新一代状态管理库,以其简洁的API和强大的功能脱颖而出。本文将带您快速上手Pinia,从安装到应用,轻松实现Vue.js项目的全局状态管理,提升开发效率和项目可维护性。
|
14天前
|
JavaScript
|
15天前
|
JavaScript
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
32 6