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-drawer-layout实现手势滑出菜单栏
Nov 19 Vue.js
vue + el-form 实现的多层循环表单验证
Nov 25 Vue.js
vue组件中节流函数的失效的原因和解决方法
Dec 02 Vue.js
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
Dec 04 Vue.js
Vue-router中hash模式与history模式的区别详解
Dec 15 Vue.js
如何在vue 中使用柱状图 并自修改配置
Jan 21 Vue.js
Vue实现摇一摇功能(兼容ios13.3以上)
Jan 26 Vue.js
vue3如何优雅的实现移动端登录注册模块
Mar 29 Vue.js
vue实现列表垂直无缝滚动
Apr 08 Vue.js
如何优化vue打包文件过大
Apr 13 Vue.js
vue3.0 数字翻牌组件的使用方法详解
Apr 20 Vue.js
vue 数字翻牌器动态加载数据
Apr 20 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
使用PHP计算两个路径的相对路径
2013/06/14 PHP
编写Smarty插件在模板中直接加载数据的详细介绍
2013/06/26 PHP
PHP实现绘制3D扇形统计图及图片缩放实例
2014/10/01 PHP
yii实现图片上传及缩略图生成的方法
2014/12/04 PHP
php获取客户端IP及URL的方法示例
2017/02/03 PHP
Json_decode 解析json字符串为NULL的解决方法(必看)
2017/02/17 PHP
Laravel中如何增加自定义全局函数详解
2017/05/09 PHP
浅析PHP7的多进程及实例源码
2019/04/14 PHP
jQeury淡入淡出需要注意的问题
2010/09/08 Javascript
JavaScript高级程序设计(第3版)学习笔记3 js简单数据类型
2012/10/11 Javascript
基于iscroll.js实现下拉刷新和上拉加载效果
2016/11/28 Javascript
AngularJS自定义控件实例详解
2016/12/13 Javascript
jQuery Password Validation密码验证
2016/12/30 Javascript
详解vue静态资源打包中的坑与解决方案
2018/02/05 Javascript
浅谈vuepress 踩坑记
2018/04/18 Javascript
nodejs实现套接字服务功能详解
2018/06/21 NodeJs
jQuery实现输入框的放大和缩小功能示例
2018/07/21 jQuery
使用 node.js 模仿 Apache 小部分功能
2019/07/07 Javascript
js模拟实现百度搜索
2020/06/28 Javascript
[03:01]2014DOTA2国际邀请赛 DC:我是核弹粉,为Burning和国土祝福
2014/07/13 DOTA
[45:59]EG vs OG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Python中用Descriptor实现类级属性(Property)详解
2014/09/18 Python
利用Python实现图书超期提醒
2016/08/02 Python
python处理Excel xlrd的简单使用
2017/09/12 Python
使用pandas中的DataFrame数据绘制柱状图的方法
2018/04/10 Python
Python简单定义与使用二叉树示例
2018/05/11 Python
django的settings中设置中文支持的实现
2019/04/28 Python
Python图像处理之图片文字识别功能(OCR)
2019/07/30 Python
python能做什么 python的含义
2019/10/12 Python
django实现模型字段动态choice的操作
2020/04/01 Python
Joe Fresh官网:加拿大时尚品牌和零售连锁店
2016/11/30 全球购物
国际礼品店:GiftsnIdeas
2018/05/03 全球购物
初一生物教学反思
2014/01/18 职场文书
公司承诺书范文
2014/05/19 职场文书
个人总结格式范文
2015/03/09 职场文书
2015年店长工作总结范文
2015/04/08 职场文书