这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助

简单介绍 Vue Router

  • Vue RouterVue.js 官方的路由插件,它和 Vue.js 是深度集成的,适合用于构建单页面应用。vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。传统的页面应用,是用一些超链接来实现页面切换和跳转的。在 vue-router 单页面应用中,则是路径之间的切换,也就是组件的切换。路由模块的本质 就是建立起url和页面之间的映射关系
  • 至于我们为什么不能用a标签,这是因为用Vue做的都是单页应用,就相当于只有一个主的 index.html 页面,所以你写的 标签是不起作用的,你必须使用 vue-router 来进行管理。

Vue Router 实现原理

  • 在了解路由模式前,我们要先清楚,vue-roter 的实现原理是怎样的,什么是单页面应用,特点是什么,这样更容易加深对路由的理解。

  • SPA 单页面及应用方式:单一页面应用程序,只有一个完整的页面;它在第一次加载页面时,就将唯一完整的 html 页面和所有其余页面组件一起下载下来,这样它在切换页面时,不会加载整个页面,而是只更新某个指定的容器中内容。

  • 单页面应用(SPA)的核心之一是: 更新视图而不重新请求页面。

  • 路由器对象底层实现的三大步骤即(1)监视地址栏变化;(2)查找当前路径对应的页面组件;(3)将找到的页面组件替换router-vieW 的位置。

  • vue-router 在实现单页面前端路由时,提供了两种方式:Hash 模式和 History 模式;vue2 是根据 mode 参数来决定采用哪一种方式,vue3 则是 history 参数,下面我们将围绕这个属性进行进一步了解。

Hash

简述

  • vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。  hash(#)是 URL 的锚点,代表的是网页中的一个位置,单单改变 # 后的部分,浏览器只会滚动到相应位置,不会重新加载网页,也就是说 # 是用来指导浏览器动作的,对服务器端完全无用,HTTP 请求中也不会不包括 # ,同时每一次改变 # 后的部分,都会在浏览器的访问历史中增加一个记录,使用 "后退" 按钮,就可以回到上一个位置,所以说 hash 模式通过锚点值的改变,根据不同的值,渲染指定 DOM 位置的不同数据。

  • # 符号本身以及它后面的字符称之为 hash,可通过 window.location.hash 属性读取。

特点

  • hash 虽然出现在URL中,但不会被包括在 HTTP 请求中。它是用来指导浏览器动作的,对服务器端完全无用,因此,改变 hash 不会重新加载页面
  • 可以为 hash 的改变添加监听事件:
  •    window.addEventListener("hashchange", fncEvent, false)
  • 每一次改变 hash(window.location.hash),都会在浏览器的访问历史中增加一个记录
  • url 带一个 # 号。

设置

  • vue3 设置 hash 模式路由

history

简述

  • history 是路由的另一种模式,由于 hash 模式会在 url 中带#,如果不想要带 #的话,我们可以使用路由的 history 模式,只需要在响应的 router 配置规则时,加上即可,vue 的路由默认是 hash 模式。
  • 利用了HTML5 History Interface中新增的 pushState() replaceState() 方法。
  • 这两个方法应用于浏览器的历史记录栈,在当前已有的 back、forward、go 的基础之上,它们提供了对历史记录进行修改的功能。只是当它们执行修改时,虽然改变了当前的 URL,但浏览器不会立即向后端发送请求。

设置

特点

  • 路由跳转不需要重新加载页面。
  • 不带 # 在大部分人看来要比 hash 路由好看许多。
  • 兼容性没有 hash 好,会在下面展开说明

生产环境问题及解决

  • 当我们把 history 项目部署到服务器中后,此时我们在浏览器输入一个网址(比如是 www.test.com ), 此时会经过 dns 解析,拿到 ip 地址后根据 ip 地址向该服务器发起请求,服务器接受到请求后,然后返回相应的结果(html,css,js)。如果我们在前端设置了重定向,此时页面会进行跳转到 www.test.com/home ,在前端会进行匹配对应的组件然后将其渲染到页面上。此时如果我们刷新页面的话,浏览器会发送新的请求 www.test.com/home, 如果后端服务器没有 /home 对应的接口,那么就会返回404。
  • 生产环境 刷新 404 的解决办法可以在 nginx 做代理转发,在 nginx 中配置按顺序检查参数中的资源是否存在,如果都没有找到,让 nginx 内部重定向到项目首页。

开发环境- historyApiFallback

  • 有些小伙伴会有疑问,为什么开发环境没有遇到这个问题呢,不是和生产同样的刷新操作嘛。

  • 这里我也是疑问了一下,经查阅相关资料后发现在 vue-cli 中 webpack 帮我们做了处理
  • 如果我们把该配置改位 false,浏览器会把我们这个当做是一次 get 请求,如果后端没有对应的接口,就会出现下面这个报错提示。

总结

  • 至此我们使用知道了 vue-roter 的两种路由模式,及差异化,简单来讲就是,hash 路由兼容梗好,但是带#显得丑些, histroy 和正常 url 路径一样,但是需要在服务器进行单独配置。大家可以根据自己的喜好去按需使用。有疑问的同学欢迎在评论区进行沟通。

本文转载于:

https://juejin.cn/post/7096034733649297421

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

记录--前端路由 hash 与 history 差异的更多相关文章

  1. 前端路由hash、history原理及简单的实践下

    阅读目录 一:什么是路由?前端有哪些路由?他们有哪些特性? 二:如何实现简单的hash路由? 三:如何实现简单的history路由? 四:hash和history路由一起实现 回到顶部 一:什么是路由 ...

  2. 前端路由实现(history)

    HTML5 history 新增了两个 API:history.pushState 和 history.replaceState 两个 API 都接收三个参数: 1.状态对象(state object ...

  3. hash和history路由的区别

    在了解路由模式前,我们先看下 什么是单页面应用,vue-router  的实现原理是怎样的,这样更容易理解路由. SPA与前端路由 SPA(单页面应用,全程为:Single-page Web appl ...

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

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

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

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

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

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

  7. 前端路由以及浏览器回退,hash & history & location

    一.前言 其实不止一次想监听浏览器的回退方法,比如 在 list.html 页滚动加载了几页列表,点到 detail.html 看详情,反回来时又得重新加载几页 H5 有背景音乐的,跳页就得重新放,体 ...

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

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

  9. 前端路由原理之 hash 模式和 history 模式

    什么是路由? 个人理解路由就是浏览器 URL 和页面内容的一种映射关系. 比如你看到我这篇博客,博客的链接是一个 URL,而 URL 对应的就是我这篇博客的网页内容,这二者之间的映射关系就是路由. 其 ...

  10. vue 路由里面的 hash 和 history

    对于 Vue 这类渐进式前端开发框架,为了构建 SPA(单页面应用),需要引入前端路由系统,这也就是 Vue-Router 存在的意义.前端路由的核心,就在于 —— 改变视图的同时不会向后端发出请求. ...

随机推荐

  1. NC24911 数独挑战

    题目链接 题目 题目描述 数独是一种填数字游戏,英文名叫 Sudoku,起源于瑞士,上世纪 70 年代由美国一家数学逻辑游戏杂志首先发表,名为 Number Place,后在日本流行,1984 年将 ...

  2. Buffer Queue原理

    BufferQueue详解 原理一.BufferQueue 简介在工作中,我们经常会和Surface,ImageReader,ImageWriter BufferQueue打交道,它们之间是什么关系呢 ...

  3. STC8H8K64U 的 USB 功能测试(未成功)

    对 STC8H8K64U 的 USB 功能测试, 因为存在很多问题并且未能解释/解决, 就不写到系列里了, 把记录放上来抛砖引玉吧. 代码 测试代码下载地址 http://www.stcmcudata ...

  4. Function与Object

    Function与Object JavaScript中内置了两个顶级对象Function.Object,Object是所有对象的基类,而所有的构造函数同时又是Function对象的实例. Object ...

  5. virtualbox中linux设置NAT和Host-Only上网(实现双机互通同时可上外网)

    关于虚拟机中几种网络连接方式请参考其他教程. 平常,我们安装好虚机,用桥接方式也就够了.毕竟它能上内网和外网. 但是有个问题,如果你的网络环境发生变化,虚机的Ip也会随之改变(桥接的Ip和主机ip必须 ...

  6. MyBaits查询MySQL日期类型结果相差8个小时

    问题描述 在Java项目中使用MyBatis作为ORM框架,但是查询出的MySQL日期类型字段值总是比数据库表里的值多8个小时. 具体说明: MySQL数据库表字段类型为timestamp,映射的Ja ...

  7. rpm的一些命令

    rpm -q xx #查询当前的包是否安装 rpm -qi xx # 查询当前包的详细信息 rpm -qpi 包文件路径 # 没装之前先查看包的信息 rpm -qpl 包文件路径 # 预计装上后会在系 ...

  8. 有了这份Java面试中的葵花宝典,让你面试起飞!!!

    HashMap面试题 HashMap与HashTable的区别 1.HashMap线程不安全 HashTable 线程是安全的采用synchronized 2.HashMap允许存放key 为null ...

  9. SpringBoot Starter大全

    spring Boot应用启动器基本的一共有44种,具体如下 1)spring-boot-starter 这是Spring Boot的核心启动器,包含了自动配置.日志和YAML. 2)spring-b ...

  10. 【Azure Entra ID】如何在中国区获取用户 StrongAuthenticationUserDetails 和 StrongAuthenticationMethods 信息

    问题描述 如何在中国区获取用户 StrongAuthenticationUserDetails 和 StrongAuthenticationMethods 信息 ? StrongAuthenticat ...