Vue的路由实现:hash模式 和 history模式的区别

news/2024/7/10 1:55:44 标签: vue

区别:

hash模式:
1.采用的是window.onhashchange事件实现。
2.可以实现前进 后退 刷新。
3.比如这个URL:http://www.abc.com/#/hello, hash 的值为#/hello。
它的特点在于:hash 虽然出现URL中,但不会被包含在HTTP请求中, 对后端完全没有影响,因此改变hash不会重新加载页面

history模式:
1.采用的是利用了HTML5 History Interface 中新增的pushState() 和replaceState() 方法。
2.可以前进、后退,但是刷新有可能会出现404的报错
3.前端的url必须和实际向后端发起请求的url 一致,如http://www.abc.com/book/id 。 如果后端缺少对/book/id 的路由处理,将返回404错误。


http://www.niftyadmin.cn/n/1521014.html

相关文章

【Flink】相关概念

Flink相关名词解释 Flink Application Cluster Flink Application Cluster是一个专用的Flink Cluster,它只从一个Flink Jobs执行Flink作业。Flink Cluster的生存期与Flink应用程序的生存期绑定。 Flink Job Cluster Flink Job Cluster是一个专用的Flink Cluster…

For artifact {org.springframework.boot:spring-boot-starter-web:null:jar}: The version cannot be empt

使用官方实例配置SpringBoot项目时&#xff0c;遇到这种错误。 官方示例是这样的&#xff1a; 报了这个错误&#xff1a; 主要意思是&#xff1a;spring-boot-starter-web版本不能为空。 所以只需加上版本号即可。 <dependency><groupId>org.springframework.bo…

【SpringBoot】Web开发——静态资源访问

知识点&#xff1a; 1. 默认只要放在当前路径的/static (or /public or /resources or /META-INF/resources&#xff09;这几个路径下都可以访问到 2. 改变静态资源路径访问前缀&#xff1a; 之后想要访问必须加上配置文件中的路径 SpringBoot如何知道需要访问的是静态资源而…

v-model的原理+使用方法

一&#xff1a;什么是v-model&#xff1f; v-model就是vue的双向绑定的指令&#xff0c;能将页面上控件输入的值同步更新到相关绑定的data属性&#xff0c;也会在更新data绑定属性时候&#xff0c;更新页面上输入控件的值。 二&#xff1a;原理 v-model其实是一个语法糖 背后…

【SpringBoot】Web开发——设置网页图标Favicon

将一个名为favicon.ico的文件放在默认路径下即可自动访问。 结果&#xff1a; Tips 测试时发现太大的图片无法成功显示 同时即使在后端修改了图标显示&#xff0c;但是如果网页有缓存则无法正常显示&#xff0c;需要禁用缓存。

两个页面传参实现的几种方法

1.使用window.name: a页面&#xff1a; <script> window.name123; </script>b页面&#xff1a; <script> console.log(window.name); </script>2.使用h5中的localStorage: a页面&#xff1a; <body> <a href"22.html">defsdf…

【SpringBoot】Web开发——Rest请求

1.请求映射 在做所有Web开发之前&#xff0c;编写一个RestController代码&#xff0c;在所有的方法前面使用RequestMapping 注解说明此方法能处理什么请求&#xff0c;这个过程称为请求映射。 2.Rest风格 Rest风格支持&#xff08;使用HTTP请求方式动词来表示对资源的操作&a…

小程序中的navigator 跳转方式

navigator中的open-type可以决定小程序的跳转方式&#xff1b; 是否关闭当前页面 或者说以何种方式进行跳转标签<navigator>中 open-type属性表示小程序的跳转方式&#xff1b;open-typeredirectToopen-typenavigateTo还有其他的跳转方式地址&#xff1a; https://develo…