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 ...
随机推荐
- gitlab 从古老的 bitnami 版本 迁移到官方最新版本
这是我之前发布在 yuque 的文章.是我刚来新公司的时候帮公司搬迁 git 记录下来的,现在看来去掉敏感部分直接发布也没啥问题啦,就搬家过来,我自己也方便查 XD . 8.1.6 -> 10. ...
- mvc基础配置
视图解析器 在spring-mvc文件中编写 <!--配置视图解析器--> <bean class="org.springframework.web.servlet.vie ...
- MyBatis框架,增删改查
一.recourses中核心配置文件mybatis-config.xml 二. recourse中jdbc.properties 三.entity实体类 四.Dao层 五.ISmbmsUserDao. ...
- [技术博客] 如何避免在代码中多重render
目录 问题发现 方案1 extracted_method and return(父函数and return法) 方案2 子函数yield,父函数调用后{return} 方案3 extracted_me ...
- 一个半吊子PM的反思
故事之源 2019年3月,也就是2016级计算机学院的大三时,软件工程这门课程由选修转为专业必修课,而七个葫芦娃共聚罗杰老师的课堂,组成葫芦娃不想写代码小分队.面临着继承往届项目.完成指定项目和自选项 ...
- Salt States概览
作者言 我也只是SaltStack的初学者,如果文中有错误的地方,请不吝赐教. 在学习的过程,我也做了不少实验,犯了不少错,积累了一些经验,对SaltStack的运行也有一定了解,如果有什么问题,或是 ...
- Unity3D普通开发人员，U3D主程分别需要掌握的技能
Unity3D普通开发人员 1.会查看和搜索unity API文档,熟悉一些3D术语单词 2.查看别人的代码,能够依葫芦画瓢 3.能够制作一些常见的UI效果,善用缓动类插件,如Do Tween pro ...
- Token 安全登陆防止窃取
HTTP 协议是无状态的 在web中使用cookie+session的技术来保持用户登陆的状态 移动端使用token来保持用户登陆状态由于token在网络中传输,很容易被 中间人获取,进而模拟用户进行 ...
- tensorflow keras analysis
目录 Q: where is Sequential defined? Q: where is compile()? tensorflow keras analysis code from keras. ...
- 经典面试题之——如何自由转换两个没有继承关系的字段及类型相同的实体模型，AutoMapper？
相信很多童鞋们都被问到过这个问题,不管是在面试的时候被问过,还是笔试题里考过,甚至有些童鞋们找我要学习资料的时候我也考过这个问题,包括博主我自己,也曾被问过,而且博主现在有时作为公司的面试官,也喜欢问 ...