Vue-router中的history模式和hash模式
还记得在我们从零开始搭建一个Vue-cli3.0项目时,预设置中出现过这样一条询问:
即是否选择历史模式,当时我们很坚决地选了否,那么哈希模式和历史模式究竟有什么区别,今天我们来一探究竟。
哈希模式(hash mode)
这是开发中的默认模式,在url中永远带着#号,在浏览器方面其支持度极佳,甚至兼容低版本的ie浏览器。说到这里就不得不说一下前端路由的原理:window是可以监听到哈希值的变化的(onhashchage事件),这就意味着:当url中的哈希值发生了变化,无需发起http请求,window也可以监听到这种变化,并按需加载前端的代码块。哈希模式也是当下单页面应用的标配,所谓前端路由的强大之处也就在这里:路由分发不需要服务器来做,前端自己就可以完成。网易云音乐的首页也是用的哈希模式:
历史模式(history mode)
在url中不带#号,用的是传统的路由分发模式,即当用户输入一个url时,是由服务器在接受用户的这个输入请求,并由服务器解析url的路径然后做相应逻辑处理。如果要做到改变url但又不刷新页面的潮流效果,就需要前端用上pushState和replaceState两个H5的api,来把url替换的同时又不刷新页面,但需要后端人员去配置url重定向的问题,不然在访问二级页面时,做刷新操作会报404的错误。这和哈希天生就不会刷新页面的特性不同,历史模式来做这件事属于一种“障眼法”,或者说是“老技术干新活”,又废又麻烦。
总结及个人观点:
“带#号不美观”这个说法,我个人是不太同意的,实际上不管带不带#号,真正愿意去记住你的域名,直接在地址栏输入的用户有多少呢?比如你想打开腾讯视频,你记得域名是多少吗?打开vue.js官网,打开mdn官网,他们的域名你是否又能章口就莱?其实绝大部分人都不关心这个,要么从书签栏进入,要么从百度搜索官网名字进入。今时今日我们要打某人的电话,不会手动地去数字键盘一个个敲电话号码,而是直接从电话薄找,甚至直接通过语音助手拨打。人是很懒的,前端路由是潮流。
Vue-router中的history模式和hash模式的更多相关文章
- Vue router中携带参数与获取参数
Vue router中携带参数与获取参数 携带参数 query方式,就是?+&结构,例如/login?id=1 <router-link :to="{ name:'login' ...
- 如何去除vue项目中的 # --- History模式
来自:https://www.cnblogs.com/zhuzhenwei918/p/6892066.html 侵删 使用vue-cli搭建的环境,在配置好路由之后,可以看到下面的情况: 但是不难发现 ...
- 前端路由的两种模式: hash 模式和 history 模式
随着 ajax 的使用越来越广泛,前端的页面逻辑开始变得越来越复杂,特别是spa的兴起,前端路由系统随之开始流行. 从用户的角度看,前端路由主要实现了两个功能(使用ajax更新页面状态的情况下): 记 ...
- html5的 history模式和hash模式
直观区别 hash 带一个# history 没有# 各自特点 hash: 仅 hash 符号之前的内容会被包含在请求中,**因此对于后端来说,即使没有做到对路由的全覆盖,也不会返回 404 错误.* ...
- vue router 中,children 中 path 为空字符串的路由,是默认打开的路由(包括在 el-tabs 中嵌套路由的情况)
详见该页面的最后一个代码块:https://router.vuejs.org/zh/guide/essentials/nested-routes.html#%E5%B5%8C%E5%A5%97%E8% ...
- 【前端路由】Vue-router 中hash模式和history模式的区别
咱们今天说说VUE路由的hash模式与history模式的区别,这个也是面试常问的问题,不要小看这道题其实问到这里的时候那个面试官应该是个大牛,开发经验丰富,这个题其实就是考验你的开发经验是否属实. ...
- Vue路由的hash模式与history模式的区别?
1.首先router有两种模式:hash模式(默认).history模式(需配置mode: 'history') hash和history的区别? hash ...
- Vue 编程式导航(通过js跳转页面)以及路由hash模式和history模式
第一种方法: this.$router.push({path:'shopcontent?aid=3'} 第二种方法 this.$router.push({name:'news'}} 通过在ma ...
- [Vue 牛刀小试]:第十二章 - 使用 Vue Router 实现 Vue 中的前端路由控制
一.前言 前端路由是什么?如果你之前从事的是后端的工作,或者虽然有接触前端,但是并没有使用到单页面应用的话,这个概念对你来说还是会很陌生的.那么,为什么会在单页面应用中存在这么一个概念,以及,前端路由 ...
随机推荐
- Spring Boot 2 + Thymeleaf:表单字段绑定、表单提交处理
Spring Boot中Thymeleaf对表单处理的一些用法:(1)使用th:field属性:进行表单字段绑定(2)使用ids对象:一般用于lable配合radio或checkbox使用(3)表单提 ...
- ABP入门教程6 - 领域层创建实体
点这里进入ABP入门教程目录 创建实体 在领域层(即JD.CRS.Core)下新建文件夹Entitys //用以存放实体对象添加一个实体类Course.cs //课程信息 using Abp.Doma ...
- android 对于asset和raw下文件的操作
Android 中资源分为两种,一种是res下可编译的资源文件, 这种资源文件系统会在R.Java里面自动生成该资源文件的ID,访问也很简单,只需要调用R.XXX.id即可;第二种就是放在assets ...
- Playbook剧本小结
1.Playbook剧本小结 1.什么是playbook,playbook翻译过来就是"剧本",那playbook组成如下 play: 定义的是主机的角色task: 定义的是具体执 ...
- sqlserver刷新视图
sqlserver 用于刷新当前数据库所有视图的存储过程 create procedure dbo.proc_refreshview as begin ) declare cur_view curso ...
- 示例:Oracle表锁、行锁模拟和处理
for update模拟锁表 --session 1 SQL> select * from tt for update; --session 2 SQL> update tt set id ...
- android 在基类activity中注册BroadcastReceiver,子activity类实现响应
android app 一般都会定义自己的BaseActivity, 如果各子Activity都需要接收广播但对广播的处理又不同时,可以考虑在BaseActivity中注册BroadcastRecei ...
- 记录Ubuntu下使用docker使用
关键词:docker.Dockerfile等等. 这里主要记录Ubuntu下docker使用细节. 首先是如何安装,然后如何创建docker镜像.搭建docker服务器.运行使用docker. 1. ...
- 2-2 远程管理命令-网卡和IP地址的概念
02.查看或配置网卡信息 序号 命令 对应英文 作用 01 ifconfig configure a network interface 查看/配置计算机当前的网卡配置信息 02 ping ip地址 ...
- 学习postman教程
postman可以做什么 1.可以做单接口的测试 2.可以调试接口 3.对接口设置变量后,可以做多接口的测试,并输出报告 如何用postman调试接口 1.填写api地址 2.选择请求方式 3.输入a ...