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

2024-08-01 12:08:27

把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 事件，只会读取哈希符号后的内容，并不会发起任何网络请求。

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

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

history 进行刷新页面时，无法找到url对应的页面，会出现 404 问题。如果要应用 history 模式，需要在服务端增加一个覆盖所有情况的候选资源：如果 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-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中如何把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