vue路由之路由的两种模式
文章目录
- 简介
- hash路由
- history模式
- 两种模式的比较
- history存在的问题
专栏目录请点击
简介
- 一般路由分两种形式
- 一种是哈希路由，最明显的特征就是路由中有一个
# - 还有一种就是
history路由，路由中不带#
- 一种是哈希路由，最明显的特征就是路由中有一个
hash路由
- hash值:比如
'http://www.baidu.com/#/abc'hash 的值为'#/abc' - hash值虽然出现在在
url中，但是并不会包含在http请求中，因此hash值改变，并不会重新加载页面 - 但是hash值的改变会触发
onhashchange事件，我们可以通过监听然后渲染自己要渲染的组件
history模式
- 他是通过H5新增的
api：pushState()和replaceState()应用于浏览器的历史记录 - 当他执行修改的时候，虽然改变了url，但是不会向后端发送请求
- 我们可以通过
onpopstate事件，来监听history的变化，然后渲染自己需要渲染的组件，达到路由的效果
两种模式的比较
在大部分情况下，两者都是差不多的，但是hash模式主要有一下的优势
- 使用
pushState()来设置url，可以是当前url同源的任意url，而hash只能修改#后的内容，所以值可以设置与当前同源的url - 如果
pushState()设置的url与当前的url一模一样，那么记录同样会会添加到栈中，而hash值，设置新值的时候才会添加到记录栈中 pushState()通参数可以添加任意的数据记录，而hash智能添加短字符串- pushState可以额外设置title属性供使用 点击
history存在的问题
history存在的问题，一般就会出现在路由路径上
- 如果前端，因为history的路径与请求后端的接口路径没有差别，当我们进行刷新的时候他会直接将路径传到后端
- 但是后端没有相应的路由处理，就会返回404的错误
对于这种情况官方推荐的是一个覆盖所有情况的候选资源
- 如果url匹配不到任何的资源，那么就应该返回同一个index.html页面
- 这样服务器端就不会返回404的错误页面，对于所有的路径都返回index.html文件
vue路由之路由的两种模式相关推荐
- Vue 路由router的两种模式
两种模式 vue中router可以设两种模式:hash和history.设置方式就是代码中注释的部分. import Vue from 'vue' import Router from 'vue-ro ...
- vue路由的两种模式：hash与history的区别
前言:众所周知,vue-router有两种模式,hash模式和history模式,下面来看看两者的区别. 一.基本情况 直观区别:hash模式url带#号,history模式不带#号. 1.hash模 ...
- vue-router前端路由的两种模式的区别
一.前端路由存在的意义 前端路由主要应用在spa项目中. 核心---在无刷新(不向后端发送请求)的情况下,可以根据不同url更改视图. 二.浏览器提供hash 和history 两种模式支持(可以说, ...
- OpenWrt的两种模式：桥接模式与路由模式
OpenWrt的两种模式:桥接模式与路由模式 1.桥接模式(Bridged AP Mode ): 通过OpenWrt 设备做桥,连接到OpenWrt的无线设备是由此网段192.168.1.0网段中的路 ...
- 2021-12-23 网工基础（十四） 链路聚合的两种模式、堆叠、集群、IP路由基础
一 链路聚合的两种模式 1.手工模式(管理员手工指定,无协议报文.没有开销) 2.LACP模式(交换机之间会交互LACP的协议,会有一点儿报文交互)一般正常情况下推荐使用LACP模式. 一般自动协商都 ...
- 前端路由的两种模式：hashhistory
前端路由的两种模式:hash和history 1.hash hash模式是通过onhashchange事件,监听url的修改优点:兼容性比较高,可以直接在项目部署上线时使用缺点:url中带#号,不美观 ...
- vue-router两种模式
说起vue-rouer,不得不提的一个概念是前端路由,要想深入理解前端路由,不得不了解路由.后端路由.前端路由和后端路由的区别.多页面应用.单页面应用这些概念. 一.捋一捋概念呀先 1.单页面应用与多 ...
- hash和history两种模式的区别+SpringBoot的特定配置
今天学习到vue-router有两种模式,一种是hash,一种是history模式 这两种模式对于后端来说有点区别 1,hash模式 这个模式是链接后拼接/#/这样的形式,在实际请求时并不加入#后面的 ...
- “约见”面试官系列之常见面试题之第一百零二篇之vue-router的两种模式（建议收藏）
众所周知,vue-router有两种模式,hash模式和history模式,这里来谈谈两者的区别. hash模式 hash模式背后的原理是onhashchange事件,可以在window对象上监听这个 ...
最新文章
- linux 国内 NTP时间服务器地址
- python中的float和eval_python中eval和float_python中eval与json.loads对json的处理
- java虚拟机的俩种异常
- 支持回调处理 php函数,PHP支持回调的函数有哪些？
- html5app大赛,Anyoffice -HTML5大赛 悦心（基于H5开发安卓音乐app）-项目总结
- 介绍当前流行的一些开源Flash视频播放器
- 删除MSSQL数据库text字段中恶意脚本Script=***.js/script的方法
- Android的UC的flash插件下载,uc浏览器flash不支持解决方法详解
- sqlhelper java_java版sqlhelper
- 青浦区服务器维修,青浦区DNS服务器地址
- 思路分享——hdu 3233
- 苹果开发：开发证书都显示“此证书的签发者无效”的解决方法
- 【玩转CSS】盒子模型
- 异步下载小说《诡秘之主》
- IP交换机与路由器配置
- python用哪种字体比较好_你在用哪种编程字体?
- 利用Isight软件优化matlab程序的一点心得
- 转载:香港实习生微软实习经验分享
- 洛谷_P2655 2038年问题（尚贤）
- c语言输入f1到f11,我来告诉你：电脑键盘的F1至F12正确用处