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



相关文章
|
7月前
|
资源调度 JavaScript 前端开发
路由管理:Vue Router的使用和配置技巧
【10月更文挑战第21天】路由管理:Vue Router的使用和配置技巧
154 3
|
7月前
|
JavaScript API
vue 批量自动引入并注册组件或路由等等
【10月更文挑战第12天】 vue 批量自动引入并注册组件或路由等等
|
6月前
|
JavaScript UED
"Vue实战技巧大揭秘:一招解决路由跳转页面不回顶部难题,让你的单页面应用用户体验飙升!"
【10月更文挑战第23天】在Vue单页面应用中,点击路由跳转时,默认情况下页面不会自动滚动到顶部,这可能影响用户体验。本文通过一个新闻网站的案例,介绍了如何使用Vue-router的全局前置守卫和`scrollBehavior`方法,实现路由跳转时页面自动滚动到顶部的功能,提升用户浏览体验。
260 0
|
7月前
|
JavaScript API
Vue中使用require.context()自动引入组件和自动生成路由的方法介绍
Vue中使用require.context()自动引入组件和自动生成路由的方法介绍
262 0
|
27天前
|
JavaScript
vue实现任务周期cron表达式选择组件
vue实现任务周期cron表达式选择组件
108 4
|
6天前
|
人工智能 自然语言处理 JavaScript
用 CodeBuddy 搭建Vue框架 像呼吸一样简单
本文介绍如何借助 CodeBuddy 快速创建 Vue 项目。CodeBuddy 是一款支持自然语言编程的工具,能根据用户需求自动生成代码,降低开发门槛。文章详细说明了通过 CodeBuddy 创建 Vue 项目的步骤,包括解决项目创建失败的问题、自动补全代码功能以及启动开发服务器的方法。无论开发者经验如何,CodeBuddy 都能显著提升效率,让开发更专注创意实现。
|
5月前
|
JavaScript
vue使用iconfont图标
vue使用iconfont图标
233 1
|
17天前
|
缓存 JavaScript 前端开发
Vue 基础语法介绍
Vue 基础语法介绍
|
2月前
|
JavaScript 前端开发 算法
vue渲染页面的原理
vue渲染页面的原理
139 56
|
2月前
|
SQL JavaScript 前端开发
Vue实现动态数据透视表(交叉表)
Vue实现动态数据透视表(交叉表)
185 13