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 ...
随机推荐
- JDBC-select练习&jdbc工具类&数据库登录案例
一.select练习 1.说明 练习: * 定义一个方法,查询emp表的数据将其封装为对象,然后装载集合,返回. 1. 定义Emp类 2. 定义方法 public List<Emp> fi ...
- nginx之动静分离（nginx与php不在同一台服务器）
nginx实现动静分离(nginx与php不在同一个服务器) 使用wordpress-5.0.3-zh_CN.tar.gz做实验 Nginx服务器的配置: [root@app ~]# tar xf w ...
- GoCN每日新闻(2019-11-08)
GoCN每日新闻(2019-11-08) GoCN每日新闻(2019-11-08) 1. Go Modules: v2及更高版本使用 https://blog.golang.org/v2-go-mod ...
- 【Gamma】Scrum Meeting 3
目录 写在前面 进度情况 任务进度表 Gamma阶段燃尽图 照片 写在前面 例会时间:5.27 22:30-23:30 例会地点:微信群语音通话 代码进度记录github在这里 临近期末,团队成员课程 ...
- dubbo学习笔记(二)dubbo中的filter
转:https://www.cnblogs.com/cdfive2018/p/10219730.html dubbo框架提供了filter机制的扩展点(本文基于dubbo2.6.0版本). 扩展接口 ...
- Refused to execute script from '...' because its MIME type ('') is not executable, and strict MIME type checking is enabled.
写在前面 部署项目到weblogic上启动首页访问空白, 浏览器控制台报如题错误. web.xml中把响应头添加防止攻击的报文过滤器禁用就行了(仅仅是为了启动), 以下为转载内容, 可以根据需要自行测 ...
- Ubuntu 安装最新版 (1.12) Golang 并使用 go mod
wget https://dl.google.com/go/go1.12.4.linux-amd64.tar.gz sudo tar -zxvf go1.12.4.linux-amd64.tar.gz ...
- 从 SVN 迁移至 Git 并保留所有 commit 记录
yum install -y git-svn 用户映射文件user.txt,等号左边为svn账号,右边为Git用户名和邮箱.注意:svn中有多少用户就要映射多少 test1=test1<1472 ...
- Go 切片：用法和本质
2011/01/05 引言 Go的切片类型为处理同类型数据序列提供一个方便而高效的方式. 切片有些类似于其他语言中的数组,但是有一些不同寻常的特性. 本文将深入切片的本质,并讲解它的用法. 数组 Go ...
- Flutter的Padding、Raw、Column、Expanded组件的基本使用
Padding组件: Padding组件的基本使用代码: import 'package:flutter/material.dart'; import 'package:flutter_testdem ...