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 ...
随机推荐
- 论文阅读：Single Image Dehazing via Conditional Generative Adversarial Network
Single Image Dehazing via Conditional Generative Adversarial Network Runde Li∗ Jinshan Pan∗ Zechao L ...
- Mercurial 的hook使用
1. Handling repository events with hooks可以通过Mercurial版本管理工具提供的hooks机制来处理repo的各种事件,从而实现对Mercurial的扩展, ...
- EAccessViolation
Access Violation(非法访问),General Protection Fault(一般保护性错误)或者Invalid Page Fault(无效页面错误),虽然说法不一样,但本质上总是由 ...
- Chrome调试工具Developer Tools——前端必备神器
本文链接:https://blog.csdn.net/u012542647/article/details/79401485 今天要给大家介绍一个神器,就是谷歌浏览器(Chorme)自带的前端调试工具 ...
- ES6 - 数组扩展（扩展运算符）
扩展运算符 扩展运算符(spread)是三个点(...).它好比 rest 参数的逆运算(函数),将一个数组转为用逗号分隔的参数序列. rest: 变量将多余的参数放入数组中. spread(扩展): ...
- 安装MySQL Server
之前安装了MySQL Workbench 8.0 CE,现在来安装MySQL Server. 点击 add next next next 完成 MySQL安装包地址: 链接:https://p ...
- Katalon studio登陆并进行用户名和密码参数化
前面步骤不截图了,简单说一下: 1.创建空的test case :login 2.点击record录制脚本,走登陆 3.生成的脚本后,点击login用例属性,新建2个变量值 4.创建好后,进入用例页面 ...
- Python 工匠：使用数字与字符串的技巧学习笔记
#Python 工匠:使用数字与字符串的技巧学习笔记#https://github.com/piglei/one-python-craftsman/blob/master/zh_CN/3-tips-o ...
- EasyDSS高性能RTMP、HLS(m3u8)、HTTP-FLV、RTSP流媒体服务器软件正式环境安装部署攻略
背景介绍 EasyDSS流媒体服务器软件,提供一站式的转码.点播.直播.时移回放服务,极大地简化了开发和集成的工作.其中,点播功能主要包含:上传.转码.分发.直播功能,主要包含:直播.录像, 直播支持 ...
- ng2 空标签
<ng-container *ngIf="v.products"> <li class="clearfix" *ngFor="let ...