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 ...
随机推荐
- 【Spring Boot】内嵌容器
Spring Boot内嵌容器支持Tomcat.Jetty.Undertow. tomcat容器 spring boot 的web应用开发必须使用spring-boot-starter-web,其默认 ...
- exception java.lang.IndexOutOfBoundsException: Index: 0, Size: 0
1.情景展示 Java 报错信息如下: java.lang.IndexOutOfBoundsException: Index: 0, Size: 0 2.原因分析 首先,这是越界异常,但不是数组越 ...
- select多选左移右移的实现
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- Netty 优雅退出
Netty 优雅退出机制和原理:https://www.infoq.cn/article/netty-elegant-exit-mechanism-and-principles/?utm_source ...
- 运行时异常RuntimeException捕获的小测试
public class ExceptionTest { public static void main(String[] args) throws InterruptedException { ne ...
- CandyCrush 糖果传奇源码+素材+教程
在这里你将深入学习C#语言和Unity开发游戏的技术.在游戏项目开发中深入学习并掌握Unity开发中的刚体,模型等等 共14讲,TS格式,大小395MB 共14讲,TS格式,大小395MB 扫码时备注 ...
- 使用Rome读取RSS报错，org.xml.sax.SAXParseException: 前言中不允许有内容。
这是我遇到过的最奇葩的错误 new URL的时候,使用静态变量就会报错org.xml.sax.SAXParseException: 前言中不允许有内容. URL url = new URL(Strin ...
- Tensorflows安装（cpu版安装方法）
一.说明 首先声明,本人系统是Windows10 64位,Win7未试. 本文旨在帮助园友以更简单的方式安装Tensorflow,下面介绍的是如何安装Python的Tensorflow cpu版本. ...
- Spring boot与Spring cloud之间的关系
Spring boot 是 Spring 的一套快速配置脚手架,可以基于spring boot 快速开发单个微服务,Spring Boot,看名字就知道是Spring的引导,就是用于启动Spring的 ...
- 使用JSP的fmt标签实现国际化支持 - smart-framework ; smart-plugin-i18n
使用JSP的fmt标签实现国际化支持 Smart-framework框架使用smart-plugin-i18n插件来完成国际化处理,原理相同,使用过滤器进行参数设置. ============== ...