好程序员web前端分享History API技能详解

好程序员web前端分享History API技能详解，相信学员在写项目时都会遇到下面这样的问题：用vant 的tab去换不同的组件，加载不同的数据。点击的时候，可以跳到对应的页面。然后返回的时候，转跳到之前的状态。可是遇到多页面的应用，里面的按钮则需要转跳其他页面。

遇到上述情况，相信很多学员想到添加参数作为区分，然后依据参数做判断。但是一旦添加参数，牵扯的修改内容也会随之增加很多。因为其他的部分转跳这个页面也都需要添加参数。

这个时候，最好的办法是历史替换，默认打开不作处理，只有tab切换的时候，做pushstate。下面就介绍在HTML5大前端中: history API 的具体用法。

(一)js/history

可以在不刷新页面的情况下动态的修改地址栏中的URL地址，动态的修改页面上所显示的资源。

window.history 的方法和属性

方法： back() forward() go()

属性： length

//返回

window.history.back()

window.history.go(-1)

//向前跳转

window.history.foward()

window.history.go(1)

//历史记录中页面总数

history.length

(二)HTML5 新方法

添加和替换历史记录的条目

pushState

history.pushState(state,title,url): 添加一条历史记录，不刷新页面

state: 一个于指定网址相关的状态对象，popstate事件触发时，该对象会传入回调函数中，如果不需要这个对象，填null

title: 新页面的标题，但是大多数浏览器都会忽略这个值，因此，这里可以填入 null

url: 新网址，必须是同一个域名

history.pushState(null, null,'./demo.html')

缺点：就是浏览器在转跳的时候，不会检查 demo.html 是否存在

(三)应用--添加 hash 值，页面只局部加载

history.pushState(null, null,'#one')

replaceState替换当前的历史记录，不刷新页面

history.replaceState(state,title,url) 替换当前历史记录，不刷新页面

history.replaceState(null, null,'?one')

(四)事件

popstate事件：历史记录发生改变时触发，调用 history.pushState() 或者 history.replaceState()，不会触发popstate()事件

hashchange事件: 当页面hash值改变的时候，常用于构建单页面的应用

按照上面的操作，跳转页面问题就可以完美解决。建议你把上面的解决代码方案自己从头到尾敲上几遍，以此确保真正掌握以及遇到相关衍生问题能够触类旁通。要知道想要成为一名合格优秀的程序员，需要积累大量实战经验，只理解了代码战术是远远不够的。

UE是当下最火爆的前端框架之一，vue-router是vue项目中几乎都会用到的组件，然而体验一时爽，其实坑不少。本篇经验将详细介绍vue-router的两种mode效果和开发测试环境下的问题，并给出解决方案。

vue-router的HTML5 History 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

const router=new VueRouter({
 mode: 'history',
 routes: [...]
})

当你使用 history 模式时，URL 就像正常的 url，例如 http://yoursite.com/user/id，就是长这样的！

不过这种模式要玩好，还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404，这就尴尬了。

所以，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。

目前后端服务器有Apache、nginx、原生 Node.js、基于 Node.js 的 Express、Internet Information Services (IIS)、Caddy、Firebase 主机等。

先给一个官方标准版配置的传送门，请戳这里→ https://router.vuejs.org/zh/guide/essentials/history-mode.html

既然是官方给出的配置，那肯定就会说的很官方咯~

按照官方给出的示例，将道理是成功的，但是官方给出的只局限于这个项目在服务器的根目录下！

如果你的项目没有放在根目录下，那么就是这么的不讲道理。

下面是在实际开发中碰到的问题。

我们的后端服务器是nginx，所以按照官方的给出的配置，找到nginx.conf，照抄代码，修改完后重启服务器，讲道理是成功的。

server
{
 listen 80;
 server_name oursite.com;
 location /test/ { 
 alias /usr/local/test/;
 index index.htm index.html;
 #上面的就是一些常规配置，下面这个才是重点
 try_files $uri $uri/ /index.html;
 
 #这里没有采用官方给出处理404错误页面的方案
 #方案一（把所有没有后缀名的请求如果404都跳转到index.html，我们没有采用）
 #error_page 404 /test/index.html;
 
 #方案二（404的方式，不是特别完美。会有浏览器留下404的状态（容易被第三方劫持），以下方式可以避免被第三方劫持！）
 if (!-e $request_filename) {
 rewrite ^/(.*) /test/index.html last;
 break;
 }//前端全栈学习交流圈：866109386
 }//帮助1-3年前端人员
}//突破技术瓶颈，提升思维能力

但是，事实就是这么的不讲道理，我们并没有成功！这就令人很是郁闷了，心中一万只神兽羊驼，奔腾而过~ 为什么没有成功呢，都是按部就班做的呀，完全不讲道理！

而真相只有一个，那就是~~~

路由文件中的路径有问题

const router=new VueRouter({
 mode: 'history',
 routes: [
 { path: '/test/', component: YourComponent },
 { path: '/test/a', component: YourComponent },
 { path: '/test/b:x', component: YourComponent }
 ]
})

在路由文件中所有的路径前面加上服务器下项目所在的文件名即可，当然也包括<router-link>和this.$router.push()中的路径，不然又是不讲道理的。

这只是在nginx服务器下的一种解决方案，至于别的服务器应该也是同理的。

对前端的技术，架构技术感兴趣的同学关注我的头条号，并在后台私信发送关键字：“前端”即可获取免费的架构师学习资料

知识体系已整理好，欢迎免费领取。还有面试视频分享可以免费获取。关注我，可以获得没有的架构经验哦！！

前端开发中，路由管理是一个不可或缺的部分。它决定了页面如何响应URL的变化，以及如何在不同的页面组件之间进行切换。在现代前端框架如React、Vue中，路由功能通常由官方提供的库（如react-router、vue-router）来处理。然而，了解如何实现一个简单的前端路由可以帮助我们更深入地理解其工作机制，并为实际开发中的路由问题提供更灵活的解决方案。

本文将探讨两种常见的前端路由实现方式：基于Hash模式和基于History模式，并分别提供简单的代码示例。

基于Hash模式的前端路由

Hash模式利用URL中的hash部分（即#之后的部分）进行路由管理。它的主要优点是兼容性好，即使在没有JavaScript支持或JavaScript被禁用的情况下，仍然可以通过服务器端的配置实现基本的页面跳转。

以下是一个简单的基于Hash模式的前端路由实现：

class HashRouter {  
  constructor(app) {  
    this.app=app;  
    this.routes={};  
    this.currentUrl=window.location.hash.slice(1) || '/';  
    this.bindEvents();  
  }  
  
  bindEvents() {  
    window.addEventListener('hashchange', this.onHashChange.bind(this));  
  }  
  
  onHashChange() {  
    this.currentUrl=window.location.hash.slice(1);  
    this.route();  
  }  
  
  route() {  
    const routeHandler=this.routes[this.currentUrl] || this.routes['/'];  
    if (routeHandler) {  
      routeHandler();  
    } else {  
      console.error(`No route handler found for ${this.currentUrl}`);  
    }  
  }  
  
  register(path, callback) {  
    this.routes[path]=callback;  
  }  
}  
  
// 使用示例  
const app=document.getElementById('app');  
const router=new HashRouter(app);  
  
router.register('/', ()=> {  
  app.innerHTML='<h1>Home Page</h1>';  
});  
  
router.register('/about', ()=> {  
  app.innerHTML='<h1>About Page</h1>';  
});  
  
// 初始路由设置  
router.route();

基于History模式的前端路由

History模式使用HTML5的History API来实现路由管理。它允许我们在不刷新页面的情况下修改URL，从而提供更好的用户体验。然而，它需要服务器端的支持，以便在访问不存在的页面时返回正确的index.html文件。

以下是一个简单的基于History模式的前端路由实现：

class HistoryRouter {  
  constructor(app) {  
    this.app=app;  
    this.routes={};  
    this.bindEvents();  
  }  
  
  bindEvents() {  
    window.addEventListener('popstate', this.onPopState.bind(this));  
  }  
  
  onPopState(event) {  
    this.route(event.state);  
  }  
  
  route(state) {  
    const path=state ? state.path : window.location.pathname;  
    const routeHandler=this.routes[path] || this.routes['/'];  
    if (routeHandler) {  
      routeHandler();  
    } else {  
      console.error(`No route handler found for ${path}`);  
    }  
  }  
  
  navigate(path) {  
    history.pushState({ path }, null, path);  
    this.route();  
  }  
  
  register(path, callback) {  
    this.routes[path]=callback;  
  }  
}  
  
// 使用示例  
const app=document.getElementById('app');  
const router=new HistoryRouter(app);  
  
router.register('/', ()=> {  
  app.innerHTML='<h1>Home Page</h1>';  
});  
  
router.register('/about', ()=> {  
  app.innerHTML='<h1>About Page</h1>';  
});  
  
// 初始路由设置  
router.route();  
  
// 导航到About页面  
router.navigate('/about');

以上两个示例分别展示了基于Hash模式和History模式的前端路由实现。虽然现代前端框架提供了更为强大和易用的路由解决方案，但理解这些基础概念仍然对我们构建高效、灵活的前端应用具有重要意义。

在线咨询

上一篇：完全攻略：30分钟做出淘宝720°VR全景H5
下一篇：一键生成数据图表！堪称办公最实用的效率神器，收藏

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

好程序员web前端分享History API技能详解

基于Hash模式的前端路由

基于History模式的前端路由

您的项目需求