vue的hash值原理也是table切换实例代码


Posted in Vue.js onDecember 14, 2020

我希望大家敲一遍

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.pages>div{display: none;}
		</style>
	</head>
	<body>
		<p>
			<a href="#/" rel="external nofollow" >aaa</a>
			<a href="#/about" rel="external nofollow" >bbb</a>
			<a href="#/user" rel="external nofollow" >cccc</a>
		</p>
		<div class="pages">
			<div id="home">首页</div>
			<div id="about">关于我的页面</div>
			<div class="user">用户中心</div>
		</div>
	</body>
	<script type="text/javascript">
		//hash 和页面一一对应起来
		//router 配置
		var router = [
			{path:"/",component:document.getElementById("home")},
			{path:"/about",component:document.getElementById("about")},
			{path:"/user",component:document.querySelector(".user")},
		]
		
		// 默认hash
		window.location.hash = "#/";
		// 默认页面
		var currentView = router[0].component;
		currentView.style.display="block";
		
		
		
		window.onhashchange=()=>{
			//通过判断hash切换div页面
			console.log(location.hash);
			//获取hash值,不要井号
			var hash = location.hash.slice(1);
			router.forEach(item=>{
				if(item.path==hash){
					//先隐藏之前显示的页面
					currentView.style.display = "none";
					// 显示对应的组件
					item.component.style.display = "block";
					//重新设置当前显示的页面是哪个div
					currentView = item.component;
				}
			})
		}
	</script>
</html>

vue的hash值原理也是table切换实例代码
vue的hash值原理也是table切换实例代码
vue的hash值原理也是table切换实例代码

到此这篇关于vue的hash值原理也是table切换的文章就介绍到这了,更多相关vue hash原理内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
VUE+Element实现增删改查的示例源码
Nov 23 Vue.js
vue中defineProperty和Proxy的区别详解
Nov 30 Vue.js
vue表单验证之禁止input输入框输入空格
Dec 03 Vue.js
vue使用exif获取图片经纬度的示例代码
Dec 11 Vue.js
Vue实现随机验证码功能
Dec 29 Vue.js
Vue页面渲染中key的应用实例教程
Jan 12 Vue.js
详解Vue3.0 + TypeScript + Vite初体验
Feb 22 Vue.js
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
Feb 23 Vue.js
vue如何批量引入组件、注册和使用详解
May 12 Vue.js
详解Vue中$props、$attrs和$listeners的使用方法
Feb 18 Vue.js
vue中的可拖拽宽度div的实现示例
Apr 08 Vue.js
vue项目配置sass及引入外部scss文件
Apr 14 Vue.js
Vue如何跨组件传递Slot的实现
Dec 14 #Vue.js
VUE中鼠标滚轮使div左右滚动的方法详解
Dec 14 #Vue.js
vue3.0实现插件封装
Dec 14 #Vue.js
vue 基于abstract 路由模式 实现页面内嵌的示例代码
Dec 14 #Vue.js
Vue实现点击当前行变色
Dec 14 #Vue.js
Vue实现简单购物车功能
Dec 13 #Vue.js
vue使用element-ui实现表单验证
Dec 13 #Vue.js
You might like
超人钢铁侠联手合作?美漫作家呼吁DC漫威合作联动以抵抗疫情
2020/04/09 欧美动漫
如何在旧的PHP系统中使用PHP 5.3之后的库
2015/12/02 PHP
jquery一般方法介绍 入门参考
2011/06/21 Javascript
一行代码告别document.getElementById
2012/06/01 Javascript
JScript分割字符串示例代码
2013/09/04 Javascript
Javascript浅谈之引用类型
2013/12/18 Javascript
jQuery手机浏览器中拖拽动作的艰难性分析
2015/02/04 Javascript
js+canvas绘制矩形的方法
2016/01/28 Javascript
解析jquery easyui tree异步加载子节点问题
2017/03/08 Javascript
详解Node.js读写中文内容文件操作
2018/10/10 Javascript
vue学习之Vue-Router用法实例分析
2020/01/06 Javascript
[38:44]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第二局
2016/02/25 DOTA
[45:16]完美世界DOTA2联赛循环赛 IO vs FTD BO2第二场 11.05
2020/11/06 DOTA
python 数据加密代码
2008/12/24 Python
wxpython 最小化到托盘与欢迎图片的实现方法
2014/06/09 Python
Python的Bottle框架的一些使用技巧介绍
2015/04/08 Python
在python中以相同顺序shuffle两个list的方法
2018/12/13 Python
python+pyqt5实现24点小游戏
2019/01/24 Python
Python 用turtle实现用正方形画圆的例子
2019/11/21 Python
Python concurrent.futures模块使用实例
2019/12/24 Python
如何基于Python创建目录文件夹
2019/12/31 Python
Python+OpenCV实现旋转文本校正方式
2020/01/09 Python
python如何处理程序无法打开
2020/06/16 Python
基于Python下载网络图片方法汇总代码实例
2020/06/24 Python
Python加速程序运行的方法
2020/07/29 Python
Python模块常用四种安装方式
2020/10/20 Python
成人高等教育毕业生自我鉴定
2013/10/22 职场文书
统计学专业毕业生的自我评价分享
2013/11/28 职场文书
总裁秘书岗位职责
2013/12/04 职场文书
通用求职信范文模板分享
2013/12/27 职场文书
关于护士节的演讲稿
2014/05/26 职场文书
食堂标语大全
2014/06/11 职场文书
上课不认真检讨书
2014/09/17 职场文书
公务员党的群众路线教育实践活动学习心得体会
2014/10/30 职场文书
高一军训决心书
2015/02/05 职场文书
浅谈golang 中time.After释放的问题
2021/05/05 Golang