Vue中如何把hash模式改为history模式

目录
  • 把hash模式改为history模式
  • 关于路由hash和history模式
    • hash模式
    • history 模式
    • 二者对比

把hash模式改为history模式

如上图所示非常简单

只需要在文件router下的index.js里加上一个mode:'history’即可把hash模式改为history模式.这个时候url上面的#号就不会再存在了,这样就把url成功把hash模式改成history了

关于路由hash和history模式

hash模式

hash 就是指 url 后的 # 号以及后面的字符,

比如,http://127.0.0.1:5500/test.html#/user,这里的hash值就是#/user。

hash 值的变化不会导致浏览器像服务器发送请求

hash 的改变会触发 hashChange 事件,浏览器的前进后退也能对其进行控制

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hash模式的实现</title>
</head>
<body>
  <button id="myBtn">改变hash的值</button>
  <script>
    const myBtn = document.getElementById('myBtn');
      // 通过 onhashchange 监听hash值变化
    window.onhashchange = (e) => {
      console.log('老URL',e.oldURL);
      console.log('新URL',e.newURL);
      console.log('hash',location.hash);
    }
  </script>
</body>
</html>

上面是通过 on 来监听事件,其实也可以用

window.addEventListener("hashchange", funcRef, false);

改变hash的三种方式:

第一种:手动在导航栏中修改

控制台的输出

第二种方式:手动点击前进后退按钮

这里是点击了后退按钮,从 #/user 后退到了 #/

第三种方式:通过js代码修改

给按钮增加监听函数,当点击按钮时,进行路由改变。

  <script>
    const myBtn = document.getElementById('myBtn');
    window.onhashchange = (e) => {
      console.log('老URL',e.oldURL);
      console.log('新URL',e.newURL);
      console.log('hash',location.hash);
    }
    // 增加监听函数
    myBtn.addEventListener('click',() => {
      location.href = '#/user';
    })
  </script>

起初,路由位于http://127.0.0.1:5500/test.html#/,

然后点击按钮

注:Location对象用于表示window上当前链接到的URL信息。

  • href: 当前window对应的超链接URL, 整个URL;
  • hash: 哈希值;
  • pathname:访问页面;

用一个网址来演示location的属性

//http://127.0.0.1:8001/01-hash.html?a=100&b=20#/aaa/bbb
location.protocal // 'http:'
localtion.hostname // '127.0.0.1'
location.host // '127.0.0.1:8001'
location.port //8001
location.pathname //'01-hash.html'
location.serach // '?a=100&b=20'
location.hash // '#/aaa/bbb'

对于href属性

history 模式

默认情况下, 路径的改变使用的URL的hash.

如果使用history模式,在配置路由规则时,加入"mode: ‘history’".

//main.js文件中
const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

history 模式,每访问一个页面都要发起网络请求,每个请求都需要服务器进行路由匹配、数据库查询、生成HTML文档后再发送响应给浏览器,这个过程会消耗服务器的大量资源,给服务器的压力较大。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>history模式的实现</title>
</head>
<body>
  <button id="myBtn">改变hash的值</button>
  <script>
    const myBtn = document.getElementById('myBtn');
    window.addEventListener('DOMContentLoaded',() => {
      //页面DOM加载完毕后打印出页面的路径
      console.log('path: ',location.pathname);
    })
    myBtn.addEventListener('click',() => {
      const state = {name:'user'};
      history.pushState(state, '', 'user');
      console.log('切换路由到了','user');
      console.log('path: ',location.pathname);
    })
  </script>
</body>
</html>

起初路由位于http://127.0.0.1:5500/test.html,

当点击了按钮之后,路由变成了http://127.0.0.1:5500/user。

history 模式

利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。

history.pushState();         // 添加新的状态到历史状态栈
history.replaceState();      // 用新的状态代替当前状态
history.state                // 返回当前状态对象
  • history.pushState() 在保留现有历史记录的同时,将 url 加入到历史记录中。
  • history.replaceState() 会将历史记录中的当前页面历史替换为 url。

由于 history.pushState() 和 history.replaceState() 可以改变 url 同时,不会刷新页面,所以在 HTML5 中的 histroy 具备了实现前端路由的能力。

这两个方法有个共同的特点:当调用他们修改浏览器历史记录栈后,虽然当前 URL 改变了,但浏览器不会刷新页面,这就为单页应用前端路由“更新视图但不重新请求页面”提供了基础。

history

在修改 url 后,虽然页面并不会刷新,但我们在手动刷新,或通过 url 直接进入应用的时候, 服务端是无法识别这个 url 的,会报 404 问题。

因为我们是单页应用,只有一个 html 文件,服务端在处理其他路径的 url 的时候,就会出现404的情况。 所以,如果要应用 history 模式,需要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回单页应用的 html 文件。

popstate

在history模式中与hash模式的hashchange对应的是popState

popstate是在浏览器回退前进或者js的 back() go() forward()方法的时候才会触发。

    //监听 popstate 事件
    window.onpopstate = (e) => {
      console.log('onpopstate', e.state, location.pathname);
    }

二者对比

1.从兼容角度分析。

hash 可以兼容到 IE8,history 只能兼容到 IE10。

2.从网络请求的角度分析。

使用 hash 模式,地址改变时通过 hashchange 事件,只会读取哈希符号后的内容,并不会发起任何网络请求。

history 模式,每访问一个页面都要发起网络请求,每个请求都需要服务器进行路由匹配、数据库查询、生成HTML文档后再发送响应给浏览器,这个过程会消耗服务器的大量资源,给服务器的压力较大。

3.服务器配置角度分析。

hash 不需要服务器任何配置。

history 进行刷新页面时,无法找到url对应的页面,会出现 404 问题。如果要应用 history 模式,需要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回单页应用的 html 文件。

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • 一文了解vue-router之hash模式和history模式

    当前版本: 3.0.3 类目录: src/history/base.js hash模式 即地址栏 URL 中的 # 符号(此 hash 不是密码学里的散列运算).比如这个 URL: http://www.abc.com/#/hello ,hash 的值为 #/hello.它的特点在于:hash 虽然出现在 URL 中,但不会被包括在 HTTP 请求中,对后端完全没有影响,因此改变 hash 不会重新加载页面. history模式 利用了 HTML5 History Interface 中新增的

  • vue-router中hash模式与history模式的区别

    vue-router有两种模式 hash模式 history模式 1.单页面应用 单页应用 1.只有一个html文件,整个网站的所有内容都在这一个html里,通过js来处理 2.不仅仅是在页面交互是无刷新的,连页面跳转都是无刷新的.为了实现单页应用 ==> 前后端分离 + 前端路由.(更新视图但不重新请求页面) 前端路由 实现起来其实也很简单,就是匹配不同的 url 路径,进行解析,加载不同的组件,然后动态的渲染出区域 html 内容. 优点 良好的交互体验,用户不需要刷新页面,页面显示流畅,

  • 区分vue-router的hash和history模式

    一.概念 为了构建 SPA(单页面应用),需要引入前端路由系统,这也就是 Vue-Router 存在的意义. 前端路由的核心,就在于:改变视图的同时不会向后端发出请求. 为了达到这种目的,浏览器当前提供了以下两种支持: 1.hash--即地址栏 URL 中的 # 符号(此 hash 不是密码学里的散列运算). 比如这个 URL:http://www.abc.com/#/hello,hash 的值为 #/hello. 它的特点在于:hash 虽然出现在 URL 中,但不会被包括在 HTTP 请求中

  • Vue中如何把hash模式改为history模式

    目录 把hash模式改为history模式 关于路由hash和history模式 hash模式 history 模式 二者对比 把hash模式改为history模式 如上图所示非常简单 只需要在文件router下的index.js里加上一个mode:'history’即可把hash模式改为history模式.这个时候url上面的#号就不会再存在了,这样就把url成功把hash模式改成history了 关于路由hash和history模式 hash模式 hash 就是指 url 后的 # 号以及后

  • 在Vue中实现随hash改变响应菜单高亮

    情景 Vue+Element 实现管理页面菜单栏, 点击菜单时 router 改变 hash 访问不同子组件. 但是改变 hash 时菜单栏展开状态和 highlight 并不会同步, 需要手动实现. Try Try See 第一反应是通过 onhashchange 监听 hash 的变化, 讲 location.hash.slice(2) 推给 menu 的 default-active 即可. 此时通过手动输入 url 或者前进后退时均可正常加载对应状态,但是通过组件中的 link 访问时,

  • 将php默认的FastCGI模式改成ISAPI模式

    一,下载PHP的ZIP文件包:http://7i24.com/system/dl/,也可以去www.php.net中下载.注意版本要对应. 二,将sapi目录中的:php4isapi.dll复制到c:\php目录中 三,进入虚拟主机管理平台的"网站管理"-"虚拟主机"--服务器设置中,修改PHP的影射,将原来的: .php,C:\PHP\php.exe,5,GET,HEAD,POST,TRACE| 改成: .php,C:\PHP\php4isapi.dll,5,GE

  • vue路由history模式页面刷新404解决方法Koa Express

    目录 为什页面刷新会出现404 Node服务使用Koa框架 Node服务使用Express框架 为什页面刷新会出现404 因为vue项目中路由hash模式改为了history模式,由于hash模式时url带的#号后面是哈希值不会作为url的一部分发送给服务器,而history模式下当刷新页面之后浏览器会直接去请求服务器,而服务器没有这个路由,于是就出现404. 那为什么页面跳转就是正常的?跳转时其实不是通过请求服务器的,而是通过js操作history的API改变地址完成的. 建议:非C端系统可以

  • 针对Vue路由history模式下Nginx后台配置操作

    前端将vue路由模式改为history模式后需要运维配置才能正常访问,配置信如下 location / { root html; index index.html index.htm; try_files $uri $uri/ @rewrites; } location @rewrites { rewrite ^(.+)$ /index.html last; } 经测试,可以正常访问 补充知识:Vue History 模式下 整合Nginx部署踩坑过程 在公司部署Vue项目期间,因Vue的Rou

  • Vue-router中hash模式与history模式的区别详解

    VUE路由的hash模式与history模式的区别,这个也是面试常问的问题,这个题其实就是考验你的开发经验是否属实. 小白回答:hash模式url带#号,history模式不带#号. 大牛解答: 形式上:hash模式url里面永远带着#号,开发当中默认使用这个模式.如果用户考虑url的规范那么就需要使用history模式,因为history模式没有#号,是个正常的url,适合推广宣传: 功能上:比如我们在开发app的时候有分享页面,那么这个分享出去的页面就是用vue或是react做的,咱们把这个

  • Vue Router路由hash模式与history模式详细介绍

    目录 一.前言 二.hash模式 三.history模式 一.前言 对于hash模式和history模式,最直接的区别就是地址栏带不带"#"号了. vue脚手架搭建的项目的路由默认是hash模式. hash模式: 创建路由实例时,添加mode:"history"属性,即可使用history模式. const router = new VueRouter({ routes, mode: "history" }) history模式: 二.hash模

  • Vue Router history模式的配置方法及其原理

    vue-router分为 hash和 history模式,前者为其默认模式,url的表现形式为 http://yoursite.com#home,比较难看.后者的url表现形式为 http://yoursite.com/home,比较美观. 但如果要使用 history模式,我们需要在后端进行额外配置.本文将讨论如何配置以及为什么要这样配置. history模式的配置方法 我们来看看官方文档是教我们怎么配置的:HTML5 History 模式. 首先要将 mode设置为 history: con

  • 浅谈vue项目4rs vue-router上线后history模式遇到的坑

    此次项目开发完后准备打包,因为hash模式的路径带#看着实在是有点丑,所以采用history模式.因为本次项目属于以前网站重构,但是seo问题,所以需要以前的一些地址路径写,所以vue-router的路径全部重改了.打包后查了网上一大堆,都说要把config里的index.js 里的build里的 assetsPublicPath: '/'改成'./',打包上线发现在hash模式下是没问题的, 但一旦改成history模式,有些动态js文件的路径都是错的.无奈之下死马当活马医,把'./'改回了'

  • vue history 模式打包部署在域名的二级目录的配置指南

    最近在做项目,需要把项目部署在域名下的二级目录,并且是在用vue-router的history 模式. 我们都知道vue-router 的两种前端基本访问模式 hash 和history .hash 模式后面带#,打包的时候只需要把绝对路径(/)换成相对对路径(./),就可以部署在任何地方,不需要服务器配合,但是不好看,所以我们一般选择history 模式,但是history 模式需要配合服务器的部署. 本文主要是在vue-cli3版本下,对部署在域名的二级目录下做四处的配置: 1. vue-r

随机推荐