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. win10bug可导致系统崩溃

    1.使用浏览器访问访问路径:\\.\globalroot\device\condrv\kernelconnect会立刻导致系统崩溃.会影响Windows10 1709及以上版本 2.使用以下代码保存成 ...

  2. Python基础语法复习笔记(一):字符串

    python基础复习笔记 个人主页:JoJo的数据分析历险记 个人介绍:小编大四统计在读,目前保研到统计学top3高校继续攻读统计研究生 如果文章对你有帮助,欢迎关注.点赞.收藏.订阅专栏 本专栏主要 ...

  3. RIDE,如何指定report,log,output的存放位置

    创建测试用例,执行后,report.html,log.html,output.txt 会默认存放到 C:\Users\你的用户名\AppData\Local\Temp下, 例如我的存放在 如果要指定存 ...

  4. codeforce D. Concatenated Multiples

    http://codeforces.com/contest/1029/problem/D 看C题的第一眼就觉得自己一定能做出来,结果就兴致勃勃地做了一天,最后做出来了.但看到这道题时,第一感觉就是&q ...

  5. 0627.selenium请求库*2

    昨天已经介绍了关于selenium的简单基本基本使用--通过两种方式自动打开和关闭谷歌浏览器今天,我们将介绍的模块将是在昨天打开谷歌浏览器的基础上,打开某一个电商平台,并搜索某一个产品,利用前面学的知 ...

  6. Python语言课程实验报告 (第三周)

    Python语言基础实验(第三周) 一.实验目的和要求 1.了解流程控制语句的结构与类型: 2.学习语句的使用: 3.掌握流程控制语句的实际应用. 二.实验环境 软件版本:Python 3.10 64 ...

  7. doskey: windows版 Alias

    1.编辑doskey.bat文件 2.打开注册表寻找.HKEY_CURRENT_USER \ Software \ Microsoft \ Command Processor (自行百度) 3.添加d ...

  8. huawei--配置链路聚合

    huawei--配置链路聚合 项目要求: LSW1和LSW2之间配置链路聚合,链路聚合分为手工和lacp两种模式.配置完后查看链路聚合状态. 项目实施: (vlan10 20 30的创建命令vlan ...

  9. java SE02

    目录 五.面向对象 1. 封装 2. 多态 3. 继承 六.内部类 1. 局部内部类 2. 局部内部类 3. 静态内部类 4.匿名内部类 七.异常 1. 五个关键字 2. 自定义异常 五.面向对象 1 ...

  10. JavaScript 类(class)

    JavaScript 类(class) 类是用于创建对象的模板. 我们使用 class 关键字来创建一个类,类体在一对大括号 {} 中,我们可以在大括号 {} 中定义类成员的位置,如方法或构造函数. ...