vue SPA设计 history hash
<body>
<h3>Histort api</h3>
<a class="api a">a,html</a>
<a class="api b">b,html</a>
<script>
//注册路由
document.querySelectorAll('.api').forEach(item => {
item.addEventListener('click', (e) => {
e.preventDefault();
let link = item.textContent;
window.history.pushState({name: 'api'},link,link)
}, false)
});
//监听路由
window.addEventListener('popstate', (e) => {
console.log({
location: location.href,
state: e.state
});
}, false)
</script>
<p>------------------</p>
<h3>Hash</h3>
<a class="hash a">#a.html</a>
<a class="hash b">#b.html</a>
<script>
//注册路由
document.querySelectorAll('.hash').forEach(item => {
item.addEventListener('click', (e) => {
e.preventDefault();
let link = item.textContent;
location.hash=link;
}, false)
});
//监听路由
window.addEventListener('hashchange', (e) => {
console.log({
location: location.href,
hash: location.hash
});
}, false)
</script>
</body>
vue SPA设计 history hash的更多相关文章
- Vue 组件设计
Vue 组件设计 Vue 作为 MVVM 框架一员,不管是写业务还是基础服务,都少不了书写组件.本文总结一下书写业务组件的一些心得. 为什么要写组件? 我们知道,只要是组件,就需要在引用的时候与 vi ...
- Vue SPA 首屏加载优化实践
写在前面 本文记录笔者在Vue SPA项目首屏加载优化过程中遇到的一些坑及优化方案! 我们以 vue-cli 工具为例,使用 vue-router 搭建SPA应用,UI框架选用 element-ui ...
- 《SPA设计与架构》之认识SPA
原文 简书原文:https://www.jianshu.com/p/84323f530223 大纲 前言 1.什么是单页面应用程序(SPA) 2.SPA与传统Web应用的区别 3.关于SPA的使用 4 ...
- vue 路由里面的 hash 和 history
对于 Vue 这类渐进式前端开发框架,为了构建 SPA(单页面应用),需要引入前端路由系统,这也就是 Vue-Router 存在的意义.前端路由的核心,就在于 —— 改变视图的同时不会向后端发出请求. ...
- Vue 的路由实现 Hash模式 和 History模式
Hash 模式: Hash 模式的工作原理是onhashchange事件,Window对象可以监听这个事件... 可以通过改变路径的哈希值,来实现历史记录的保存,发生变化的hash 都会被浏览器给保存 ...
- 单页面SPA应用路由原理 history hash
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...
- vue切换路由模式{hash/history}
vue中常用的路由模式 hash(#):默认路由模式 histroy(/)切换路由模式 切换路由模式 export default new Router({ // 路由模式:hash(默认),hist ...
- vue router mode 设置"hash"与"history"的区别
router官网的说明如下: ********************************************我是官网说明分隔符--开始**************************** ...
- [vue]spa单页开发及vue-router基础
- 了解spa页面跳转方式:(2种) spa: 单页跳转方式 开发(hash模式): https://www.baidu.com/#2313213 生产(h5利于seo): history.pushS ...
随机推荐
- nginx之rewrite相关功能
Nginx Rewrite相关功能 Nginx服务器利用ngx_http_rewrite_module 模块解析和处理rewrite请求,此功能依靠 PCRE(perl compatible regu ...
- 解决mysql无法显示中文/MySQL中文乱码问号等问题
一般都是编码格式问题 显示编码格式: show variables like'character_set_%'; 将其中Value不是utf8的改为utf8: set character_set_cl ...
- nginx架构分析之 事件驱动模型
事件驱动模型 事件驱动模型是实现异步非阻塞的一个手段.事件驱动模型中,一个进程(线程)就可以了. 对于web服务器来说,客户端A的请求连接到服务端时,服务端的某个进程(Nginx worker pro ...
- 一周 GitHub 开源项目推荐：阿里、腾讯、陌陌、bilibili……
阅读本文大概需要 2.8 分钟. 陌陌风控系统正式开源 陌陌风控系统静态规则引擎,零基础简易便捷的配置多种复杂规则,实时高效管控用户异常行为. GitHub 地址 https://github.com ...
- Spring不能直接@autowired注入Static变量
一.业务场景 spring框架应用中有些静态方法需要依赖被容器管理的类,就像这样: @Component public class Test { @Autowired private static U ...
- js控制网页窗口一打开就自动全屏
1.如果不需要开新窗口 在body区加入: <body onLoad= "javascript:window.resizeTo(screen.availWidth,screen.a ...
- UDP丢包原因总结
丢包检查方法 给每个UDP包编号,对比收发端的接收到的包.对于UDP协议层上的包,例如RTP包,可以从RTP包中读出包的序列号进行判断. 抓包.发送端和接收端分别抓包.linux下可以使用tcpdum ...
- OpenCV2 与opencv3 问题解决
本文链接:https://blog.csdn.net/ling_xiobai/article/details/79691785今天使用opencv运行一个脚本,但是出现cv2.cv.BoxPoints ...
- R3300L Android相关的记录
在寻找高版本Android固件的过程中遇到一个Android6.0的固件, 刷上去之后发现没有Root. 因为原发布者设置了收费的QQ群, 固件开机图上就是QQ群号, 满以为交了钱之后应该能有Root ...
- 【转发】SqlServer数据库表生成C# Model实体类SQL语句
已知现有表T1 通过运行下面的sql即可,先配置表名. declare @TableName sysname = 'T1' declare @Result varchar(max) = ' /// & ...