1.首先router有两种模式:hash模式(默认)、history模式(需配置mode: 'history')

hash和history的区别?

  hash                                          history                      
url显示 有# 无#
回车刷新 可以加载到hash值对应页面 一般就是404掉了
支持版本 支持低版本和IE浏览器 HTML5新推出的API

正确回答:hash模式url里面永远带着#号,我们在开发中默认使用这个模式。那么在声明时候要用history模式呢?

如果用户考虑url的规范那么就需要使用history模式,因为history模式没有#号,是个正常的url适合推广宣传。当然其功能也有区别,比如我们在开发app的时候有分享页面,那么这个分享出去的页面就是用vue或者react做的,咋们把这个页面分享到第三方的app里,有的app里面url是不允许带有#号的,所以要将#去除那么就要使用history模式,但是使用history模式还有一个问题就是,在访问二级页面的时候,做刷新操作,会出现404错误,那么就需要和后端人员配合让他配置一下apache或是nginx的url重定向,重定向到你的首页路由上就可以了。

Vue路由的hash模式与history模式的区别?的更多相关文章

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

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

  2. Vue中hash模式和history模式的区别

    vue-router 中hash模式和history模式. 在vue的路由配置中有mode选项,最直观的区别就是在hash模式下的地址栏里的URL夹杂着‘#’号 ,而history模式下没有.vue默 ...

  3. vue开发多页面应用 - hash模式和history模式

    我们知道vue可以快速开发web单页应用,而且官方为我们提供了自己的应用脚手架vue-cli,我们只需要下载脚手架,安装依赖后就可以启动vue应用雏形. 这得益与webpack的依赖追踪,各种资源后缀 ...

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

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

  5. 前端路由的两种模式:hash(#)模式和history模式(转)

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

  6. vue-router的hash模式与history模式的对比

    Vue-router 中hash模式和history模式的关系在vue的路由配置中有mode选项 最直观的区别就是在url中 hash 带了一个很丑的 # 而history是没有#的mode:&quo ...

  7. Vue-router 中hash模式和history模式的区别

    实际上存在三种模式: Hash: 使用URL的hash值来作为路由.支持所有浏览器. History: 以来HTML5 History API 和服务器配置.参考官网中HTML5 History模式 ...

  8. hash模式与history模式

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

  9. Vue 的路由实现 Hash模式 和 History模式

    Hash 模式: Hash 模式的工作原理是onhashchange事件,Window对象可以监听这个事件... 可以通过改变路径的哈希值,来实现历史记录的保存,发生变化的hash 都会被浏览器给保存 ...

随机推荐

  1. 20199310《Linux内核原理与分析》第十二周作业

    1.问题描述 2014年9月24日,Bash中发现了一个严重漏洞shellshock,该漏洞可用于许多系统,并且既可以远程也可以在本地触发.在本实验中,通过学习重现攻击该漏洞,加深对于ShellSho ...

  2. 如何优雅的维护 K8S Worker 节点

    前言 正常维护工作节点的流程 当我们要进行 K8S 节点维护时往往需要执行 kubectl drain, 等待节点上的 Pod 被驱逐后再进行维护动作. 命令行如下: kubectl drain NO ...

  3. Mac自带编码转换工具iconv

    iconv --help Usage: iconv [OPTION...] [-f ENCODING] [-t ENCODING] [INPUTFILE...] or: iconv -l Conver ...

  4. Pointers and Memory

    Stanford CS Education Library #102 一.Basic Pointers 指针主要有两个用途:使不同的代码段共享信息.方便链表(树)的处理. 指针示意图: derefer ...

  5. 2019 Multi-University Training Contest 10 I Block Breaker

    Problem Description Given a rectangle frame of size n×m. Initially, the frame is strewn with n×m squ ...

  6. python(文件操作)

    一.文件操作 1.tell()方法返回文件的当前位置,即文件指针当前位置. UTF-8 编码格式,一个中文占3个字符 GBK 编码格式,一个中文占2个字符 #写入前文件内容如下 "" ...

  7. XCTF练习题-WEB-webshell

    XCTF练习题-WEB-webshell 解题步骤: 1.观察题目,打开场景 2.根据题目提示,这道题很有可能是获取webshell,再看描述,一句话,基本确认了,观察一下页面,一句话内容,密码为sh ...

  8. Android | 带你零代码实现安卓扫码功能

    目录 小序 背景介绍 前期准备 开始搬运 结语 小序   这是一篇纯新手教学,本人之前没有任何安卓开发经验(尴尬),本文也不涉及任何代码就可以使用一个扫码demo,华为scankit真是新手的福音-- ...

  9. C语言程序设计实验报告三

    C程序设计实验报告 姓 名:张美盛 实验地点:家 实验时间:2020年3月29日 实验项目:4.3.1 If语句的应用 4.3.2 switch-case的应用 4.3.3 switch-case嵌套 ...

  10. 区间dp C - Two Rabbits

    C - Two Rabbits 这个题目的意思是,n块石头围一圈.一只兔子顺时针,一只兔子逆时针(限制在一圈的范围内). 这个题目我觉得还比较难,不太好想,不过后来lj大佬给了我一点点提示,因为是需要 ...