js 实现前端路由的方法

前端路由原理

History API

https://developer.mozilla.org/en-US/docs/Web/API/History_API

https://developer.mozilla.org/en-US/docs/Web/API/History

length (read only)

scrollRestoration (auto or manual)

state (read only)

window.history.back();
window.history.go(-1); window.history.forward();
window.history.go(1) window.history.pushState()
window.history.replaceState() // no need window history.back();
history.go(-1); history.forward();
history.go(1) history.pushState()
history.replaceState()

https://developer.mozilla.org/en-US/docs/Web/API/Window/history


https://developer.mozilla.org/en-US/docs/Web/API/History_API/Working_with_the_History_API

https://developer.mozilla.org/en-US/docs/Web/API/History/pushState

https://developer.mozilla.org/en-US/docs/Web/API/History/replaceState


let stateObj = {
foo: "bar",
}; history.pushState(stateObj, "page 2", "bar.html"); history.replaceState(stateObj, "page 3", "bar2.html");

popstate

https://developer.mozilla.org/en-US/docs/Web/API/Window/popstate_event

popstate

window.addEventListener('popstate', (event) => {
console.log("location: " + document.location + ", state: " + JSON.stringify(event.state));
}); history.pushState({page: 1}, "title 1", "?page=1");
history.pushState({page: 2}, "title 2", "?page=2");
history.replaceState({page: 3}, "title 3", "?page=3");
history.back(); // Logs "location: http://example.com/example.html?page=1, state: {"page":1}"
history.back(); // Logs "location: http://example.com/example.html, state: null"
history.go(2); // Logs "location: http://example.com/example.html?page=3, state: {"page":3}

onpopstate


window.onpopstate = function(event) {
console.log("location: " + document.location + ", state: " + JSON.stringify(event.state));
}; history.pushState({page: 1}, "title 1", "?page=1");
history.pushState({page: 2}, "title 2", "?page=2");
history.replaceState({page: 3}, "title 3", "?page=3");
history.back(); // Logs "location: http://example.com/example.html?page=1, state: {"page":1}"
history.back(); // Logs "location: http://example.com/example.html, state: null"
history.go(2); // Logs "location: http://example.com/example.html?page=3, state: {"page":3}"

hash router

hashchange

https://developer.mozilla.org/en-US/docs/Web/API/Window/hashchange_event

window.addEventListener('hashchange', function() {
console.log('The hash has changed!')
}, false);

function locationHashChanged() {
if (location.hash === '#cool-feature') {
console.log("You're visiting a cool feature!");
}
} window.onhashchange = locationHashChanged;

refs

client-side routing

https://krasimirtsonev.com/blog/article/deep-dive-into-client-side-routing-navigo-pushstate-hash

https://technologyconversations.com/2015/08/09/including-front-end-web-components-into-microservices/

https://juejin.im/post/6844903842643968014



xgqfrms 2012-2020

www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!


js 实现前端路由的方法的更多相关文章

  1. director.js实现前端路由

    注:director.js的官网 https://github.com/flatiron/director director.js是什么? 理解:前端的route框架,director.js客户端的路 ...

  2. node.js获取请求参数的方法和文件上传

    var http=require('http') var url=require('url') var qs=require('querystring') http.createServer(onRe ...

  3. 浅析使用vue-router实现前端路由的两种方式

    关于vue-router 由于最近的项目中一直在使用vue,所以前端路由方案也是使用的官方路由vue-router,之前在angularJS项目中也是用过UI-router,感觉大同小异,不过很显然v ...

  4. JS高级学习笔记(9) 之 转:前端路由跳转基本原理

    原文链接: 前端路由跳转基本原理 前述 前端三大框架Angular.React和Vue都推行单页面应用SPA开发模式,这是因为在路由切换时,替换DOM Tree中发生修改的DOM部分,来减少原来因为多 ...

  5. thinkphp在前端页面的js代码中可以使用 U方法吗? 可以使用模板变量如__URL__等吗?

    thinkphp在前端页面的js代码中可以使用 U方法吗? : 可以的! tp的U方法, 是"全局的", 什么是全局的? 就是, 可以在 "任何地方"使用的: ...

  6. 原生JS实现一个简单的前端路由(原理)

    说一下前端路由实现的简要原理,以 hash 形式(也可以使用 History API 来处理)为例, 当 url 的 hash 发生变化时,触发 hashchange 注册的回调,回调中去进行不同的操 ...

  7. 前端路由、后端路由——想要学好vue-router 或者 node.js 必须得明白的两个概念

    前端路由和后端路由的概念讲解 引言 正文 一.路由的概念 二.后端路由 三.前端路由 四.其他知识 结束语 引言 无论你是正在学习vue 还是在学习node, 你一定会碰到前端路由和后端路由这两个概念 ...

  8. 简单的基于hash和hashchange的前端路由

    hash定义 hash这个玩意是地址栏上#及后面部分,代表网页中的一个位置,#后面部分为位置标识符.页面打开后,会自动滚动到指定位置处. 位置标识符 ,一是使用锚点,比如<a name=&quo ...

  9. javascript基础修炼(6)——前端路由的基本原理

    [造轮子]是笔者学习和理解一些较复杂的代码结构时的常用方法,它很慢,但是效果却胜过你读十几篇相关的文章.为已知的API方法自行编写实现,遇到自己无法复现的部分再有针对性地去查资料,最后当你再去学习官方 ...

随机推荐

  1. C#高级编程第11版 - 第四章 索引

    [1]4.2 继承的类型 1.C#不支持类的多继承,但它支持一个接口继承自多个接口. 2.单继承:单继承允许一个类继承自另外一个基类,C#支持. 3.多级继承:多级继承允许创建一个类继承自它的父类,而 ...

  2. Soul API 网关源码解析 03

    目标 使用 soul 代理 dubbo 服务 dubbo 服务如何注册到网关的? dubbo 插件是如何工作的? 理清 http --> 网关--> dubbo provider 整条链路 ...

  3. 对话 CTO〡用声音在一起,听荔枝 CTO 丁宁聊 UGC 声音互动平台的技术世界 原创 王颖奇 极客公园 2018-12-01

    https://mp.weixin.qq.com/s/jfHFXZpzbAEbHKkCMSev6w 对话 CTO〡用声音在一起,听荔枝 CTO 丁宁聊 UGC 声音互动平台的技术世界 原创 王颖奇 极 ...

  4. RPC 框架要实现这个功能,我们可以使用泛化调用。那什么是泛化调用呢?我们带着这个问题,先学习下如何在没有接口的情况下进行 RPC 调用。

    RPC 框架要实现这个功能,我们可以使用泛化调用.那什么是泛化调用呢?我们带着这个问题,先学习下如何在没有接口的情况下进行 RPC 调用.

  5. 三次握手 四次握手 原因分析 TCP 半连接队列 全连接队列

    小结 1. 三次握手的原因:保证双方收和发消息功能正常: [生活模型] "请问能听见吗""我能听见你的声音,你能听见我的声音吗" [原理]A先对B:你在么?我在 ...

  6. cogs 2566 字符串最大值

    2566. [51nod 1129] 字符串最大值 ★★   输入文件:string_maxval.in   输出文件:string_maxval.out   简单对比时间限制:1 s   内存限制: ...

  7. Oracle数据库误删除数据恢复(Oracle闪回功能)

    一.启用行移动功能 alter table table_name enable row movement ; 二.可查询之前某一个时间点的数据(默认是1440分钟,即24小时内的数据) select ...

  8. 404 GET /nbextensions/jupyter-js-widgets/extension.js

    数据科学交流群,群号:189158789,欢迎各位对数据科学感兴趣的小伙伴的加入! 解决办法: 首先要确定你安装和配置nbextensions时有没有加--user,如果当时没加这里就不用加,否则不一 ...

  9. Codeforces Round #585 (Div. 2) E. Marbles(状压dp)

    题意:给你一个长度为n的序列 问你需要多少次两两交换 可以让相同的数字在一个区间段 思路:我们可以预处理一个数组cnt[i][j]表示把i放到j前面需要交换多少次 然后二进制枚举后 每次选择一个为1的 ...

  10. 【hdu 1576】A/B(数论--拓展欧几里德 求逆元 模版题)

    题意:给出 A%9973 和 B,求(A/B)%9973的值. 解法:拓展欧几里德求逆元.由于同余的性质只有在 * 和 + 的情况下一直成立,我们要把 /B 转化为 *B-1,也就是求逆元. 对于 B ...