还记得在我们从零开始搭建一个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模式的更多相关文章

  1. Vue router中携带参数与获取参数

    Vue router中携带参数与获取参数 携带参数 query方式,就是?+&结构,例如/login?id=1 <router-link :to="{ name:'login' ...

  2. 如何去除vue项目中的 # --- History模式

    来自:https://www.cnblogs.com/zhuzhenwei918/p/6892066.html 侵删 使用vue-cli搭建的环境,在配置好路由之后,可以看到下面的情况: 但是不难发现 ...

  3. 前端路由的两种模式: hash 模式和 history 模式

    随着 ajax 的使用越来越广泛,前端的页面逻辑开始变得越来越复杂,特别是spa的兴起,前端路由系统随之开始流行. 从用户的角度看,前端路由主要实现了两个功能(使用ajax更新页面状态的情况下): 记 ...

  4. html5的 history模式和hash模式

    直观区别 hash 带一个# history 没有# 各自特点 hash: 仅 hash 符号之前的内容会被包含在请求中,**因此对于后端来说,即使没有做到对路由的全覆盖,也不会返回 404 错误.* ...

  5. vue router 中,children 中 path 为空字符串的路由,是默认打开的路由(包括在 el-tabs 中嵌套路由的情况)

    详见该页面的最后一个代码块:https://router.vuejs.org/zh/guide/essentials/nested-routes.html#%E5%B5%8C%E5%A5%97%E8% ...

  6. 【前端路由】Vue-router 中hash模式和history模式的区别

    咱们今天说说VUE路由的hash模式与history模式的区别,这个也是面试常问的问题,不要小看这道题其实问到这里的时候那个面试官应该是个大牛,开发经验丰富,这个题其实就是考验你的开发经验是否属实. ...

  7. Vue路由的hash模式与history模式的区别?

    1.首先router有两种模式:hash模式(默认).history模式(需配置mode: 'history') hash和history的区别?   hash                    ...

  8. Vue 编程式导航(通过js跳转页面)以及路由hash模式和history模式

    第一种方法: this.$router.push({path:'shopcontent?aid=3'}   第二种方法   this.$router.push({name:'news'}} 通过在ma ...

  9. [Vue 牛刀小试]:第十二章 - 使用 Vue Router 实现 Vue 中的前端路由控制

    一.前言 前端路由是什么?如果你之前从事的是后端的工作,或者虽然有接触前端,但是并没有使用到单页面应用的话,这个概念对你来说还是会很陌生的.那么,为什么会在单页面应用中存在这么一个概念,以及,前端路由 ...

随机推荐

  1. jupyter notebook改变行间图片大小

    jupyter notebook使用起来代码效果很直接,这是我最喜欢的一点,但是主题单一,后来改了一下主题.也可以接受了,但是还有一个问题是显示图片太小我们可以用两个方法来改变它. 一.可以通过rcP ...

  2. ETCD:TLS

    原文地址:TLS etcd支持用于客户端到服务器以及对等方(服务器到服务器/集群)通信的自动TLS以及通过客户端证书的身份验证. 要启动并运行,首先要获得一个成员的CA证书和签名密钥对. 建议为集群中 ...

  3. 转:C# String为值类型还是引用类型

    关于String为值类型还是引用类型的讨论一直没有平息,最近一直在研究性能方面的问题,今天再次将此问题进行一次明确.希望能给大家带来点帮助,如果有错误请指出. 来看下面例子: //值类型 int a ...

  4. C#_.NetFramework_WebAPI项目_EXCEL数据导出

    [推荐阅读我的最新的Core版文章,是最全的介绍:C#_.NetCore_Web项目_EXCEL数据导出] 项目需要引用NPOI的Nuget包: A-2--EXCEL数据导出--WebAPI项目--N ...

  5. C# params 用法

    params 主要用在方法或函数参数数组中, 1,当参数个数不确定时使用 2,不能盒ref,和out组合使用 3,与参数数组对应的实参可以时一个 同类型数组,也可以时任意多个同类型变量 4,实参是数组 ...

  6. GO语言介绍以及开发环境配置

    一.介绍 GO语言是静态强类型语言 静态也就是编译型语言 二.安装 1.下载地址 下载地址 https://golang.google.cn/dl/ 2.安装 Linux安装 1.下载二进制包:go1 ...

  7. 一文解读HTTP2 (转)

    作为一个经常和web打交道的程序员,了解这些协议是必须的,本文就向大家介绍一下这些协议的区别和基本概念,文中可能不局限于前端知识,还包括一些运维,协议方面的知识,希望能给读者带来一些收获,如有不对之处 ...

  8. Python语法速查: 6. 循环与迭代

    返回目录 (1)while循环与for循环 while仅能用于普通循环,而for除了可以做循环外,还可以遍历序列.集合.字典.迭代器等. 需要注意的是,在类似:for i in somelist: 的 ...

  9. Android Studio中无法找到android.os.SystemProperties解决办法

    这个SystemProperties类主要是在这个jar包中layoutlib.jar,所以现在的办法就是让这个 jar包加载到 android studio中 下面讲解如何添加: 1.找到对应项目的 ...

  10. MVC(基础二)

    原文链接:https://blog.csdn.net/wuzxc520/article/details/77880783 1.网站开发介绍 2.响应流程 3.MVC 介绍 4.文件夹含义