利用history.pushState实现前端路由

<!DOCTYPE html>
<html>
<head><title></title>
</head>
<body><div className="nav"><a οnclick="linkTo(1)">link1</a><a οnclick="linkTo(2)">link2</a></div><div id="router-view"></div><script>var view = document.getElementById('router-view');function linkTo(link){switch(link) {case 1: {window.history.pushState({a:1}, 'mylink1', '/link1');view.innerHTML = 'link1 content';break;}case 2: {window.history.pushState({a:1}, 'mylink2', '/link2');view.innerHTML = 'link2 conetnt';break;}default: return;}return false;}window.addEventListener('popstate', function(e){console.log(e);})</script>
</body>
</html>

利用history.pushState实现前端路由相关推荐

SPA 中前端路由基本原理与实现方式
SPA 前端路由原理与实现方式通常 SPA 中前端路由有2中实现方式,本文会简单快速总结这两种方法及其实现: 修改 url 中 Hash 利用 H5 中的 history Hash 我们都知道 ur ...
前端路由模式详解（hash和history）
前端路由模式详解(hash和history) 前端路由有两种模式:hash 模式和 history 模式,接下来分析这两种模式的实现方式和优缺点. hash 模式 hash 模式是一种把前端路由的路径 ...
c语言实现路由功能,前端路由的两种实现方式，内附详细代码
一.前端路由介绍前端路由主要应用在SPA(单页面开发)项目中.在无刷新的情况下,根据不同的URL来显示不同的组件或者内容. 前端路由的实现原理 : hash值 + onhashchange事件 hi ...
javascript基础修炼——前端路由的基本原理
前端路由,顾名思义就是一个前端不同页面的状态管理器,可以不向后台发送请求而直接通过前端技术实现多个页面的效果. [造轮子]是笔者学习和理解一些较复杂的代码结构时的常用方法,它很慢,但是效果却胜过你读十 ...
404 单页应用报错路由_详解vue 单页应用（spa）前端路由实现原理
写在前面:通常 SPA 中前端路由有2种实现方式: window.history location.hash 下面就来介绍下这两种方式具体怎么实现的一.history 1.history基本介绍 w ...
Vue 前端路由基础
Vue 前端路由基础何为路由? 在现代前端开发中,路由是非常重要的一环.但路由到底是什么呢? 对于前后端来说,路由就是URL到函数的映射.通俗地来说,这是从路由的实现原理上来解释路由的(就好比计算机 ...
怎样监听history.pushState、history.replaceState事件
前言 SPA应用的核心是路由监听,一般有两种方式,其一是利用URL锚点并监听hashchange事件,其二就是利用history.pushState和history.replaceState两个API ...
单页面应用(SPA)前端路由hash 模式 VS history 模式
文章目录单页面应用(SPA) 前端路由的由来前端路由 hash 模式 history 模式 hash.history优缺点单页面应用(SPA) 简单的说 SPA 就是一个WEB项目只有一个 HT ...
【前端路由】Vue-router 中hash模式和history模式的区别 a标签跳转
[前端路由]Vue-router 中hash模式和history模式的区别咱们今天说说VUE路由的hash模式与history模式的区别,这个也是面试常问的问题,不要小看这道题其实问到这里的时候那个 ...

利用history.pushState实现前端路由

利用history.pushState实现前端路由相关推荐

最新文章

热门文章