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 相关文章推荐
快速解决vue2+vue-cli3项目ie兼容的问题
Nov 17 Vue.js
对vue生命周期的深入理解
Dec 03 Vue.js
Vue与React的区别和优势对比
Dec 18 Vue.js
Vue组件简易模拟实现购物车
Dec 21 Vue.js
vue 使用rules对表单字段进行校验的步骤
Dec 25 Vue.js
浅谈Vue开发人员的7个最好的VSCode扩展
Jan 20 Vue.js
用vite搭建vue3应用的实现方法
Feb 22 Vue.js
vue-router路由懒加载及实现的3种方式
Feb 28 Vue.js
vue实现拖拽进度条
Mar 01 Vue.js
vue实现可移动的悬浮按钮
Mar 04 Vue.js
vue项目多环境配置(.env)的实现
Jul 21 Vue.js
vue 自定义组件添加原生事件
Apr 21 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 数学运算验证码实现代码
2009/10/11 PHP
PHP实现获取图片颜色值的方法
2014/07/11 PHP
PHP实现图片裁剪、添加水印效果代码
2014/10/01 PHP
详解Yii2 之 生成 URL 的方法
2017/06/16 PHP
jquery 通过name快速取值示例
2014/01/24 Javascript
javascript实现阻止iOS APP中的链接打开Safari浏览器
2014/06/12 Javascript
jquery实现模拟百分比进度条渐变效果代码
2015/10/29 Javascript
原生js实现日期计算器功能
2017/02/17 Javascript
Vue.2.0.5过渡效果使用技巧
2017/03/16 Javascript
基于JavaScript实现飘落星星特效
2017/08/10 Javascript
微信小程序媒体组件详解(视频,音乐,图片)
2017/09/19 Javascript
基于angular-utils-ui-breadcrumbs使用心得(分享)
2017/11/03 Javascript
Vue 父子组件的数据传递、修改和更新方法
2018/03/01 Javascript
vue两个组件间值的传递或修改方式
2018/07/04 Javascript
node.js爬取中关村的在线电瓶车信息
2018/11/13 Javascript
加速vue组件渲染之性能优化
2020/04/09 Javascript
[11:57]《一刀刀一天》第十七期:TI中国军团加油!
2014/05/26 DOTA
Python性能优化技巧
2015/03/09 Python
Python中Random和Math模块学习笔记
2015/05/18 Python
Python爬虫框架Scrapy实战之批量抓取招聘信息
2015/08/07 Python
浅谈Python 对象内存占用
2016/07/15 Python
Python 实现数据库(SQL)更新脚本的生成方法
2017/07/09 Python
Python3.5 Pandas模块之Series用法实例分析
2019/04/23 Python
python中的协程深入理解
2019/06/10 Python
Python爬虫运用正则表达式的方法和优缺点
2019/08/25 Python
解决TensorFlow GPU版出现OOM错误的问题
2020/02/03 Python
python实现代码审查自动回复消息
2021/02/01 Python
基于HTML5新特性Mutation Observer实现编辑器的撤销和回退操作
2016/01/11 HTML / CSS
日本面向世界,国际级的免税在线购物商城:DOKODEMO
2017/02/01 全球购物
DOUGLAS波兰:在线销售香水和化妆品
2020/07/05 全球购物
大学同学聚会邀请函
2014/01/29 职场文书
初中英语演讲稿
2014/04/29 职场文书
幼儿园教师的自我评价范文
2014/09/17 职场文书
标准离婚协议书(2014版)
2014/10/05 职场文书
2014年党务工作总结
2014/11/25 职场文书
Python echarts实现数据可视化实例详解
2022/03/03 Python