Vue的hash/history模式
hash路由模式
- URL 中的 hash 值只是客户端的一种状态,向服务端发送请求的时候,hash 部分不会被发送;
- hash 值得改变会在浏览器的历史记增加访问记录,所以可以通过浏览器的回退、前进控制 hash 值的改变;
- 可以通过 a 标签设置 href 值或者通过 js 给location.hash 赋值来改变 hash 值;
- 可以通过
hashchang事件来监听 hash 值的变化,从而对页面进行跳转(渲染);
history路由模式
HTML5提供了 history API 来实现 URL 的变化,其中最主要的 API 有以下两个:history.pushState() 和 history.replaceState()。这两个API 可以在不刷新的情况下操作浏览器的历史记录,不同的是,前者是新增一个历史记录,后者是直接替换当前的历史记录。
- 通过 pushState 和 replaceState 两个API 来操作实现 URL 的变化;
- 可以通过
popstate事件来监听 URL 的变化,从而对页面进行跳转(渲染); history.pushState()或history.replaceState()不会触发popstate事件,需要手动触发页面跳转;- 需要后台配置支持;
Vue的hash/history模式的更多相关文章
- 如何去除vue项目中的 # — vue路由的History模式
前言 在创建的 router 对象中,如果不配置 mode,就会使用默认的 hash 模式,该模式下会将路径格式化为 #! 开头. 添加 mode: 'history' 之后将使用 HTML5 his ...
- 每天一点点之vue框架开发 - History 模式下线上路由报404错误
vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. 如果不想要很丑的 hash,我们可以用路由的 his ...
- Vue路由配置history模式
我的博客: https://github.com/Daotin/fe-notes/issues vue需要node.js吗? 你可以用 script 标签的形式引入vue.min.js 这样的,不需要 ...
- vue react 路由history模式刷新404问题解决方案
vue单页因微信分享和自动登录需要,对于URL中存在’#’的地址,处理起来比较坑.用history模式就不会存在这样的问题.但是换成history模式,就会有个新的问题,就是页面刷新后,页面就无法显示 ...
- Vue之八 HTML5 History模式
nginx配置 location / { root /webroot/www/ShopMall3; try_files $uri $uri/ /index.html; } /:访问路径: root:服 ...
- vue的mode: 'history'模式
const router = new VueRouter({ mode: 'history', routes: [...] }) 不用mode: 'history'的时候,页面url地址后面会加上一个 ...
- vue项目使用history模式打包应该注意的地方
1.在config/index.js中将assetsPublicPath原来的’/‘修改为‘./’. build: { env: require('./prod.env'), index: path. ...
- Vue项目History模式404问题解决
本文主要解决Vue项目使用History模式发布到服务器Nginx上刷新页面404问题.(由于每个项目的情况都不尽相同,本方案已经完美解决本在所使用项目,具体情况可能还需要修改.) 1.项目背景分析 ...
- Tomcat 配置Vue history模式
Tomcat 配置Vue history模式 近日 , 在使用 Tomcat 部署Vue项目时 , 刷新项目出现404的异常 . 原因是 Vue使用了history模式 , 而tomcat没有相关配 ...
- Apache支持Vue router使用 HTML5History 模式
一.前言 前端Vue router 使用history模式,URL会比hash模式好看,这种模式要玩好,还需要后端配置支持,否则会报404错误. 注:1.前端代码省略. 2.此处后台使用Apache服 ...
随机推荐
- FPGA MIG调试bug(二)
目标器件:复旦微FPGA:JFM7K325T8FCBGA676(对标Xilinx Kintex-7系的XC7K325T) 工程背景:送入FPGA的外部时钟为差分时钟,时钟送入FPGA后,经过PLL输出 ...
- 记录C#学习过中看到的文章
1.DataRow 转实体类 https://www.cnblogs.com/macT/p/10878863.html https://www.cnblogs.com/yangboyu/archive ...
- 回归分析-2.X 简单线性回归
2.1 简单线性回归模型 y与x之间的关系假设 \(y=\beta_0+\beta_1x+\varepsilon\) \(E(\varepsilon|x)=0\) \(Var(\varepsilon| ...
- IDEA激活 重置试用30天
转载于 https://www.cnblogs.com/renlywen/p/14216325.html jetbrains-agent已经停止,现在又出现了新的激活方式,重置试用时间,以下为操作步骤 ...
- 用keil调试程序的时候,一点击调试就弹出STARTUP.A51那个窗口,解决办法
前天晚上我折腾了很久 网上查了各种方法.最终自己发现,调试之前一定要在keil编译一遍,再debug这样就不会弹窗了. 另外,keil在调试过程中,修改代码是不会有任何作用的,你看我故意写错,继续单步 ...
- Web安全与渗透测试笔记
Web安全与渗透测试笔记 @author: lamaper 一.基本网络知识 (一)网络是怎样联通的 TCP/IP协议 Internet Http协议 (二)Http协议 http请求 一个完整的Ht ...
- Qt实现抽奖程序
一.简介 该程序命名为Lucky,实现的功能如下: 1. 加载抽奖人员名单,并保存加载路径: 2. 单击左键或者点击ctrl+s开始抽奖,并滚动显示人员名单,显示的人员名单格式为 部门-姓名. 3. ...
- 容器逃逸 --with docker.sock
容器逃逸 --with docker.sock 本人对于容器逃逸的基本理解就是用户从容器中逃出去到宿主机里去了. 本文意在记录一个使用 docker.sock 来进行容器逃逸的方法. 首先随便来个镜像 ...
- Quartz 2D实现文字镂空效果
什么是镂空效果,下图就是一个镂空效果的文字: 从图可知,文字是透明的,可以看到下面的图片内容,而UILabel其它部分是白色背景. 使用Quartz 2D绘制镂空效果,大体思路如下: 实现一个UILa ...
- 003. html篇之《表单》
html篇之<表单> 一.结构 <form action="url" method="post" name=""> ...