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 ...
随机推荐
- 【JZOJ6230】【20190625】梦批糼
题目 一个$n\times m \times l $的立方体,有一些位置有障碍 一次操作会随机选择一个立方体,共有\(w\)次操作 询问所有操作都不选到障碍点,被选到至少一次的点的期望 $n ,m,l ...
- 【LG2839】[国家集训队]middle
[LG2839][国家集训队]middle 题面 洛谷 题解 按照求中位数的套路,我们二分答案\(mid\),将大于等于\(mid\)的数设为\(1\),否则为\(-1\). 若一个区间和大于等于\( ...
- JS回调函数怎么写的？
相信每个做前端的同学都用过太多太多的回调函数, 接下来就看看回调函数是怎么来的. 这玩意儿也没那么神秘,直接看代码: 声明函数的时候,把回调函数用作参数,并且在函数内调用它 function getD ...
- 深度学习中loss总结
一.分类损失 1.交叉熵损失函数 公式: 交叉熵的原理 交叉熵刻画的是实际输出(概率)与期望输出(概率)的距离,也就是交叉熵的值越小,两个概率分布就越接近.假设概率分布p为期望输出,概率分布q为实际输 ...
- ubuntu之路——day19.1 深度CNN的探究
1.经典的CNN LeNet-5 1998的CNN鼻祖 以前用的sigmoid和tanh 下图给的是relu和softmax AlexNet ImageNet2012的冠军 VGG-16 ImageN ...
- leetcode 85. 最大矩形
题目描述: 给定一个仅包含 0 和 1 的二维二进制矩阵,找出只包含 1 的最大矩形,并返回其面积. 思路分析: 这题是之前那道最大正方形的进阶,同样是利用dp来求解.通过逐行去计算最大矩形,即优化的 ...
- mysql注入写文件
select * from admin where id =-1 union select 1,'<?php phpinfo();?>',3,4 into outfile 'c:\\1.p ...
- vmware ubuntu16 启动蓝屏屏幕闪
vmware ubuntu16 启动蓝屏屏幕闪 虚拟机安装了ubuntu16 desktop,没有关闭自动更新: 结果关机虚拟机时出现等5秒更新,类似win10关机更新: 再开机发现就蓝屏了,多次重启 ...
- Zookeeper:Unable to read additional data from client sessionid 0x00, likely client has closed socket
异常信息: 2018-03-20 23:34:01,887 [myid:99] - INFO [NIOServerCxn.Factory:0.0.0.0/0.0.0.0:2181:NIOServerC ...
- linux系统错误码大全
#define EPERM 1 /* Operation not permitted */ #define ENOENT 2 /* No such file or directory */ #defi ...