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 +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
Nov 18 Vue.js
Vue项目如何引入bootstrap、elementUI、echarts
Nov 26 Vue.js
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
Dec 02 Vue.js
vue中如何添加百度统计代码
Dec 19 Vue.js
vuex的使用步骤
Jan 06 Vue.js
vue+elementui通用弹窗的实现(新增+编辑)
Jan 07 Vue.js
Vue项目打包部署到apache服务器的方法步骤
Feb 01 Vue.js
解决vue项目本地启动时无法携带cookie的问题
Feb 06 Vue.js
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
Feb 23 Vue.js
Element-ui Layout布局(Row和Col组件)的实现
Dec 06 Vue.js
vue cli4中mockjs在dev环境和build环境的配置详情
Apr 06 Vue.js
vue postcss-px2rem 自适应布局
May 15 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/03/26 PHP
使用PHP实现下载CSS文件中的图片
2015/12/06 PHP
JavaScript的9个陷阱及评点分析
2008/05/16 Javascript
Javascript的闭包
2009/12/31 Javascript
杨氏矩阵查找的JS代码
2013/03/21 Javascript
JQuery操作iframe父页面与子页面的元素与方法(实例讲解)
2013/11/20 Javascript
js封装可使用的构造函数继承用法分析
2015/01/28 Javascript
Jquery中offset()和position()的区别分析
2015/02/05 Javascript
JavaScript中的Math.atan2()方法使用详解
2015/06/15 Javascript
详解webpack和webpack-simple中如何引入css文件
2017/06/28 Javascript
AnglarJs中的上拉加载实现代码
2018/02/08 Javascript
Vue+axios实现统一接口管理的方法
2018/07/23 Javascript
vue中如何去掉空格的方法实现
2018/11/09 Javascript
JS基于Location实现访问Url、重定向及刷新页面的方法分析
2018/12/03 Javascript
webpack-mvc 传统多页面组件化开发详解
2019/05/07 Javascript
JS数组方法shift()、unshift()用法实例分析
2020/01/18 Javascript
vue+iview实现分页及查询功能
2020/11/17 Vue.js
python3使用urllib模块制作网络爬虫
2016/04/08 Python
python实现协同过滤推荐算法完整代码示例
2017/12/15 Python
python顺序的读取文件夹下名称有序的文件方法
2018/07/11 Python
在python3中pyqt5和mayavi不兼容问题的解决方法
2019/01/08 Python
Python应用领域和就业形势分析总结
2019/05/14 Python
python flask 如何修改默认端口号的方法步骤
2019/07/12 Python
使用Python和Scribus创建一个RGB立方体的方法
2019/07/17 Python
利用Python的sympy包求解一元三次方程示例
2019/11/22 Python
在Python IDLE 下调用anaconda中的库教程
2020/03/09 Python
全球最大的中文旅行网站:去哪儿网
2017/11/16 全球购物
全球最大的户外用品零售商之一:The House
2018/06/12 全球购物
萨克斯第五大道英国:Saks Fifth Avenue英国
2019/04/01 全球购物
业务主管岗位职责
2013/11/20 职场文书
家长会欢迎标语
2014/06/24 职场文书
道路运输企业安全生产责任书
2014/07/28 职场文书
三提三创主题教育活动查摆整改措施
2014/10/25 职场文书
工作业绩不及格检讨书
2014/10/28 职场文书
python实现求纯色彩图像的边框
2021/04/08 Python
JavaScript 事件捕获冒泡与捕获详情
2021/11/11 Javascript