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模式的更多相关文章

  1. 如何去除vue项目中的 # — vue路由的History模式

    前言 在创建的 router 对象中,如果不配置 mode,就会使用默认的 hash 模式,该模式下会将路径格式化为 #! 开头. 添加 mode: 'history' 之后将使用 HTML5 his ...

  2. 每天一点点之vue框架开发 - History 模式下线上路由报404错误

    vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. 如果不想要很丑的 hash,我们可以用路由的 his ...

  3. Vue路由配置history模式

    我的博客: https://github.com/Daotin/fe-notes/issues vue需要node.js吗? 你可以用 script 标签的形式引入vue.min.js 这样的,不需要 ...

  4. vue react 路由history模式刷新404问题解决方案

    vue单页因微信分享和自动登录需要,对于URL中存在’#’的地址,处理起来比较坑.用history模式就不会存在这样的问题.但是换成history模式,就会有个新的问题,就是页面刷新后,页面就无法显示 ...

  5. Vue之八 HTML5 History模式

    nginx配置 location / { root /webroot/www/ShopMall3; try_files $uri $uri/ /index.html; } /:访问路径: root:服 ...

  6. vue的mode: 'history'模式

    const router = new VueRouter({ mode: 'history', routes: [...] }) 不用mode: 'history'的时候,页面url地址后面会加上一个 ...

  7. vue项目使用history模式打包应该注意的地方

    1.在config/index.js中将assetsPublicPath原来的’/‘修改为‘./’. build: { env: require('./prod.env'), index: path. ...

  8. Vue项目History模式404问题解决

    本文主要解决Vue项目使用History模式发布到服务器Nginx上刷新页面404问题.(由于每个项目的情况都不尽相同,本方案已经完美解决本在所使用项目,具体情况可能还需要修改.) 1.项目背景分析 ...

  9. Tomcat 配置Vue history模式

    Tomcat 配置Vue  history模式 近日 , 在使用 Tomcat 部署Vue项目时 , 刷新项目出现404的异常 . 原因是 Vue使用了history模式 , 而tomcat没有相关配 ...

  10. Apache支持Vue router使用 HTML5History 模式

    一.前言 前端Vue router 使用history模式,URL会比hash模式好看,这种模式要玩好,还需要后端配置支持,否则会报404错误. 注:1.前端代码省略. 2.此处后台使用Apache服 ...

随机推荐

  1. SAP 后台任务定时job

    定时任务的事务码 sm36:创建定时任务 sm37:查看定时任务 JDBG:后台任务debug,在对应的sm37中对应的job页面 t-code输入 创建定时任务SM36 名称可以随便起 一般都是按自 ...

  2. Unity 使用IO流获取PNG/JPG/GIF/BMP的宽高【转】

    原文链接:https://blog.csdn.net/flj135792468/article/details/107963280?utm_medium=distribute.pc_relevant. ...

  3. input 模糊搜索下拉框

    html <input type="text" class="layui-input blockInput" id="taskExpressio ...

  4. liunx常用命令必备,持续更新

    inux中的命令的确是非常多,但是只需要掌握我们最常用的命令足够完成我们的工作了. 1.切换超级用户与普通用户 默认登录的是普通用户权限显示$符从普通用户切换超级用户权限:sudo su输入密码 从超 ...

  5. Gitlab迁移(亲测)

    1. 概述 当前gitlab部署在k8s内,根据基础设施设计此处不合理,需将gitlab迁移至主机部署的gitlab 当前位置:k8s 集群 迁移后位置:云主机部署gitlab 2. Gitlab从K ...

  6. Ubuntu18.04LTS虚拟机优化

    1.没网 刚安装好没网,可以设置NAT连接,也可以直接设置为桥接模式联网.这里直接桥接. 网络中心使用的是以太网,所以就在菜单的"编辑"里的"虚拟网络编辑器"里 ...

  7. windows elasticsearch中文乱码

    一:找到安装目录下的config jvm.options文件 二:修改或增加: -Dfile.encoding=GBK 参考文章地址:https://www.shuzhiduo.com/A/rV57O ...

  8. Web安全与渗透测试笔记

    Web安全与渗透测试笔记 @author: lamaper 一.基本网络知识 (一)网络是怎样联通的 TCP/IP协议 Internet Http协议 (二)Http协议 http请求 一个完整的Ht ...

  9. MATH1851 Calculus and ordinary differential equations

    课程内容笔记,自用,不涉及任何 assignment,exam 答案 Notes for self use, not included any assignments or exams 由于提前预习了 ...

  10. CompletableFuture的thenCompose使用具体说明

    1.thenCompose 如果你还没有了解CompletableFuture或者希望再次熟悉一下,可以参考 CompletableFuture使用方法详细说明 1.1. thenCompose的特点 ...