vue 路由原理--js版

最新推荐文章于 2024-01-24 23:57:25 发布
最新推荐文章于 2024-01-24 23:57:25 发布
阅读量526 收藏
点赞数
分类专栏： vue 路由 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46328144/article/details/108400192
版权
vue 同时被 2 个专栏收录
37 篇文章 0 订阅
订阅专栏
路由
1 篇文章 0 订阅
订阅专栏

同一页面切换

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.pages>div{ display: none;}
			/* 让pages直接子元素div全部隐藏 */
		</style>
	</head>
	<body>
		<p><a href="#/">首页</a> | <a href="#/about">关于我们</a> | <a href="#/user">用户页面</a></p>
		<div class="pages">
			<div id="home">
				<h1>首页内容</h1>
			</div>
			<div id="about">
				<h1>关于页面内容</h1>
			</div>
			<div class="user">
				<h1>用户页面</h1>
			</div>
		</div>
		<script type="text/javascript">
			// router 页面切换的配置数组
			//做一个配置 让hash对应div节点
			const router = [
				{path:"/" ,component:home},
				{path:"/about" ,component:about},
				{path:"/user" ,component:document.querySelector(".user")},
			]
			var currentView = router[0]; //默认显示页面 第0个
			// 当hash发生改变时候
			location.hash = "#"+currentView.path;//设置当前的hash值为默认的第0个配置的path值
			// 只要hash发生变化 触发 onhashchange事件
			window.onhashchange=function(e){
				var hash = window.location.hash.slice(1); //获取到当前的哈希值.截取从第一位到最后（去掉#号）
				console.log(hash);
				 //遍历每一个配置项
				router.forEach((item,index)=>{
					if(hash == item.path){//如果hash值与 当前配置项的path匹配
						currentView.component.style.display = "none";//默认显示页面对应的组件隐藏
						item.component.style.display="block";//配置项对应的组件显示
						currentView = router[index];//重新设置当前显示的页面
					}
				})
				
			}
			
			
			
			
			//简单解释
			//原理，hash发生改变
			// window.οnhashchange=function(e){
			// 	var hash = window.location.hash.slice(1);
			// 	console.log(hash);
				
			// 	if(hash =="/"){
			// 		home.style.display="block";
			// 		about.style.display="none";
			// 	}
			// 	if(hash =="/about"){
			// 		home.style.display="none";
			// 		about.style.display="block";
			// 	}
			// }
		</script>
	</body>
</html>
想喝橙汁儿
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-admin-template-master.zip
12-05
Vue.js 是一个流行的前端JavaScript框架，用于构建用户界面。Vue CLI 3 是Vue.js的官方命令行工具，它提供了一种快速、高效的方式来初始化和管理项目。Element UI 是一套基于 Vue 的组件库，用于构建优雅的后台管理...
学习vue-element-admin，优化了大量融入代码，添加中文注释
05-16
通过学习和实践这个项目，开发者不仅可以掌握Vue.js的基本原理和使用，还能深入了解vue-element-admin的架构设计，同时通过中文注释加深对源码的理解，提升代码阅读和编写能力。这对于提升个人在前端开发领域的专业...
弄懂vue-router的实现原理
张木期的博客
08-20 2万+
官网文档，…, 下面这种路由表的写法比较优雅，我把路由单独写在一个文件routes.js . router／routes.js 文件代码 const routes = [ { path: '/', redirect: '/recommend' }, { path: '/recommend', component: () => import('../...
vue使用路由router-view
HYNN12的博客
03-21 6907
vue router router-view
vue-router 路由超详细教程
热门推荐
weixin_47124112的博客
09-06 3万+
路由（英文： router）就是对应关系Hash 地址与组件之间的对应关系。vue-router是 vue.js 官方给出的路由解决方案。它只能结合 vue 项目进行使用，能够轻松的管理 SPA 项目中组件的切换。vue-router 的官方文档地址：https://router.vuejs.org/zh/2. vue-router 安装和配置的步骤① 安装 vue-router 包② 创建路由模块③ 导入并挂载路由模块④ 声明路由链接和占位符2.1在项目中安装 vue-router。
vue源码学习---vueRouter原理 ------ router-view 原理
qq_43631129的博客
02-28 1213
vue源码学习---vueRouter原理 ------ router-view 原理
05-vue-cli-路由配置
weixin_46048259的博客
10-22 890
vue-cli-路由配置
Vue2 - keep-alive 作用和原理
最新发布
qq_40147756的博客
01-24 2088
Vue2 - keep-alive 作用和原理
Vue中keep-alive原理
庸人方自扰，自在就好
06-29 1万+
keep-alive是用来缓存组件的，比如我们有个列表页，在点击详情页之后，如果返回之后不想刷新列表页，就可以用keep-alive组件进行缓存。除此以外，还有很多应用场景。用法1：我们想要缓存某个组件，只要用keep-alive组件将其包裹就行。 用法2：包裹component组件缓存动态组件，或者包裹router-view缓存路由页面，也就是keep-alive配合路由守卫（元信息）实现缓存。比如常在router.js路由表里定义好哪些页面需要缓存，就可以通过下面这样实现了： 属性 include
【Vue】VUE模板vue-admin-template添加角色权限路由
See_Star的博客
06-27 5854
VUE模板vue-admin-template-4.4.0添加角色权限路由
VUE3浅析---路由
qq_22610595的博客
06-15 991
vue3中的路由
Vue---路由
qq_45954420的博客
03-07 680
一、相关理解 1.路由就是一组key-value的对应关系 多个路由，需要经过路由器的管理 一个路由就是一组映射关系（key-value） key为路径，value可能是function或component 路由分类: 后端路由： 理解：value是function，用于处理客服端提交的请求 工作过程：服务器接收到一个请求时，根据请求路径找到匹配的函数来处理请求， 返回响应数据 前端路由： 理解：value是component，用于展示页面内容 工作过程...
vue-admin-template-4.4.0.zip
03-01
Vue.js 是一款流行的轻量级前端JavaScript框架，它以其易学易用、高效灵活的特点深受开发者喜爱。Vue Admin Template则是基于Vue.js构建的后台管理界面模板，为开发人员提供了一个快速搭建后台管理系统的基础架构。...
vue-plugin-cli
04-02
了解Vue CLI插件的工作原理和结构对于Vue.js开发者来说非常重要，这能帮助他们更好地定制开发环境，提高开发效率。同时，熟悉JavaScript插件系统也能增强开发者对整个生态系统的理解，便于他们利用社区资源解决实际...
vue-devtools-5.3.4.rar
08-23
Vue.js 是一个流行的前端JavaScript框架，它以组件化开发、易用性和高性能著称。Vue DevTools 是一个强大的浏览器开发者工具，专为 Vue.js 应用程序设计，它可以帮助开发者在浏览器环境中进行实时调试和检查应用程序...
Ant Design of Vue —— Table表格组件 —— 设置动态表头
当历史只剩罪恶，唯有推倒重来，我们开创文明，我们传承文明，周而复始，生生不息。
03-26 7004
需求：表格的表头，需要动态改变 效果图 方法 动态改变columns ，通过push改变 关键代码 find(arr, str) { this.findTF = false; arr.forEach(item => { if (item.title == str) { return this.findTF = true; } }) }, find2(arr, str) { this.findTF2 = false; arr.forEach(item =
Ant Design of Vue —— Table表格组件 —— 设置动态表头（固定下的动态）
当历史只剩罪恶，唯有推倒重来，我们开创文明，我们传承文明，周而复始，生生不息。
02-01 4352
需求：表格的表头，需要动态改变 效果图 实现步骤： 一、表头数据columns columns: [ { // title:'y1', scopedSlots:{ title:'y1' }, align:"center", dataIndex: 'y1' }, { // title:'y2', scopedSlots:{ title:'y2'
jeecgboot 图片与文件地址问题
当历史只剩罪恶，唯有推倒重来，我们开创文明，我们传承文明，周而复始，生生不息。
08-13 2856
jeecg 开发过程中碰到的问题 需求：非组件时显示图片与文件 问题：图片未曾正确显示 原因：地址不对 解决方法：加一句调用地址的语句 代码如下： //item image 是循环的地址 // 一：直接拼接，然后在html中使用 window._CONFIG['staticDomainURL']+'/'+item // 二。分开拼接：直接在html中使用 <img :src="`${staticDomainURL}/${image}`" alt=""> //data 中定义stat
vue 学习计划列表 ToDoList
当历史只剩罪恶，唯有推倒重来，我们开创文明，我们传承文明，周而复始，生生不息。
08-31 2403
vue 学习计划列表 ToDoList 附上代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="./vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> &l
vue-router 路由实现原理
05-20
Vue Router 是 Vue.js 官方的路由管理器，它和 Vue.js 的核心深度集成，可以让用户更方便地实现单页应用程序。Vue Router 的实现原理主要涉及以下几个方面： 1. 路由配置 Vue Router 的路由配置是通过一个 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值