Vue36 hash模式和history模式
1 简介
路由模块的本质就是建立起url和页面之间的映射关系。hash模式url里面永远带着#号,history没有,开发当中默认使用hash模式。
2 hash模式和history的区别
1)hash路由在地址栏URL上有#,用 window.location.hash 读取。而history路由没有会好看一点
2)我们进行回车刷新操作,hash路由会加载到地址栏对应的页面,而history路由一般就404报错了(刷新是网络请求,没有后端配合处理会报错)
3)hash路由支持低版本的浏览器,而history路由是HTML5新增的API
4)hash的特点在于它虽然出现在了URL中,但是不包括在http请求中,所以对于后端是没有一点影响的,所以改变hash不会重新加载页面,所以这也是单页面应用的必备
hash 模式下,仅hash符号之前的内容会被包含在请求中,如http://www.abc.com,因此对于后端来说,即使没有做到对路由的全覆盖,也不会返回404错误。
history模式下,前端的URL必须和实际向后端发起请求的URL一致。如htttp://www.abc.com/book/id。如果后端缺少对/book/id 的路由处理,将返回404错误
3 配置
在配置路由器的时候配置mode属性即可
const router = new VueRouter({
mode:'history',
routes:[...]
}) export default router
Vue36 hash模式和history模式的更多相关文章
- 前端路由的两种模式: hash 模式和 history 模式
随着 ajax 的使用越来越广泛,前端的页面逻辑开始变得越来越复杂,特别是spa的兴起,前端路由系统随之开始流行. 从用户的角度看,前端路由主要实现了两个功能(使用ajax更新页面状态的情况下): 记 ...
- vue-router的hash模式与history模式的对比
Vue-router 中hash模式和history模式的关系在vue的路由配置中有mode选项 最直观的区别就是在url中 hash 带了一个很丑的 # 而history是没有#的mode:&quo ...
- 【前端路由】Vue-router 中hash模式和history模式的区别
咱们今天说说VUE路由的hash模式与history模式的区别,这个也是面试常问的问题,不要小看这道题其实问到这里的时候那个面试官应该是个大牛,开发经验丰富,这个题其实就是考验你的开发经验是否属实. ...
- 前端路由的两种模式:hash(#)模式和history模式(转)
随着 ajax 的使用越来越广泛,前端的页面逻辑开始变得越来越复杂,特别是spa的兴起,前端路由系统随之开始流行. 从用户的角度看,前端路由主要实现了两个功能(使用ajax更新页面状态的情况下): 记 ...
- Vue-router 中hash模式和history模式的区别
实际上存在三种模式: Hash: 使用URL的hash值来作为路由.支持所有浏览器. History: 以来HTML5 History API 和服务器配置.参考官网中HTML5 History模式 ...
- hash模式与history模式
随着 ajax 的使用越来越广泛,前端的页面逻辑开始变得越来越复杂,特别是spa的兴起,前端路由系统随之开始流行. 从用户的角度看,前端路由主要实现了两个功能(使用ajax更新页面状态的情况下): 记 ...
- Vue路由的hash模式与history模式的区别?
1.首先router有两种模式:hash模式(默认).history模式(需配置mode: 'history') hash和history的区别? hash ...
- Vue中hash模式和history模式的区别
vue-router 中hash模式和history模式. 在vue的路由配置中有mode选项,最直观的区别就是在hash模式下的地址栏里的URL夹杂着‘#’号 ,而history模式下没有.vue默 ...
- vue开发多页面应用 - hash模式和history模式
我们知道vue可以快速开发web单页应用,而且官方为我们提供了自己的应用脚手架vue-cli,我们只需要下载脚手架,安装依赖后就可以启动vue应用雏形. 这得益与webpack的依赖追踪,各种资源后缀 ...
- Vue 编程式导航(通过js跳转页面)以及路由hash模式和history模式
第一种方法: this.$router.push({path:'shopcontent?aid=3'} 第二种方法 this.$router.push({name:'news'}} 通过在ma ...
随机推荐
- js高级基础部分
基于尚硅谷的尚硅谷JavaScript高级教程提供笔记撰写,加入一些个人理解 github源码 博客下载 数据类型的分类和判断 主要问题 分类 基本(值)类型 Number ----- 任意数值 -- ...
- 嵌入式-C语言基础:通过结构体指针访问结构体数组
#include<stdio.h> #include<string.h> struct Student { char name[32]; int age; int height ...
- 打不开 github 的方法与推荐基于Vue3与Element plus的后台管理系统
一.打不开 github 的方法 1.打开本机 hosts 文件(C:\Windows\System32\drivers\etc) 2.然后在 hosts 文件里的末尾放入一下两个 IP 地址: # ...
- docker中php xdebug调试开发
docker-compose环境来自:https://github.com/zhaojunlik...原文:http://blog.oeynet.com/post/9... 说明 在开发中,断点调试是 ...
- 使用SunnyUI的datagridview常用代码(个人常用)
1.窗体加载时初始化grid private void LayOut() { dgv.Font = new System.Drawing.Font("微软雅黑", 9F); dgv ...
- C温故补缺(六):C反汇编常用的AT&Tx86语法
C语言反汇编用到的AT&T x86汇编语法 参考:CSDN1,CSDN2 默认gcc -S汇编出的,以及反汇编出的,都是AT&T x86代码,可以用-masm=intel指定为inte ...
- JAVA-面向对象之对象拷贝
Java 中的数据类型分为基本数据类型和引用数据类型.对于这两种数据类型,在进行赋值操作.用作方法参数或返回值时,会有值传递和引用(地址)传递的差别. Map对象 测试01-等号赋值: @Test p ...
- Apache Dubbo 多语言体系再添新员:首个 Rust 语言版本正式发布
Dubbo Rust 定位为 Dubbo 多语言体系的重要实现,提供高性能.易用.可扩展的 RPC 框架,同时通过接入 Dubbo Mesh 体系提供丰富的服务治理能力.本文主要为大家介绍 Dubbo ...
- 总算给女盆友讲明白了,如何使用stream流的filter()操作
一.引言 在上一篇文章中<这么简单,还不会使用java8 stream流的map()方法吗?>分享了使用stream的map()方法,不知道小伙伴还有印象吗,先来回顾下要点,map()方法 ...
- bug处理记录:com.fasterxml.jackson.core.JsonParseException: Illegal unquoted character ((CTRL-CHAR, code 9)): has to be escaped using backslash to be included in string value at [Source:
1. 报错: com.fasterxml.jackson.core.JsonParseException: Illegal unquoted character ((CTRL-CHAR, code 9 ...