前端路由的原生代码实现？前端如何监听路由变化？

最新推荐文章于 2024-06-27 19:54:40 发布
最新推荐文章于 2024-06-27 19:54:40 发布
阅读量4.6k 收藏 2
点赞数 1
分类专栏： HTML 5 前端路由 Vue.js 文章标签： window.addEventListener hashchange 前端路由
本文为CSDN博主原创文章，不允许其他平台转载。擅自转载至其他平台，严肃追究！
本文链接：https://blog.csdn.net/qq_35393869/article/details/80265235
版权
Vue.js 同时被 3 个专栏收录
138 篇文章 10 订阅
订阅专栏
HTML 5
33 篇文章 3 订阅
订阅专栏
前端路由
4 篇文章 0 订阅
订阅专栏

前端如何监听路由的变化？如何根据前端路由的变化，去操作相应的DOM？

本文从前端层面上，大致解读一下，前端路由的监听与相关DOM操作的方法。

实现的基本原理：
  1. 首先，放置指定的DOM标识，
  2. 其次，当锚点值（即：浏览器地址）改变将触发hashchange的回调函数，
  3. 最后，根据前端路由的switchcase匹配结果，将我们指定的模板数据text = 'xxx'，插入到DOM标识id = 'main'中。

效果图预览：

改动路由，回车之后

首先我们看一下html代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>JS监视锚点值的改变</title>
	<style>
		div{height: 100px;}
		.header{background-color: hotpink}
		#main{background-color: yellowgreen}
		.footer{background-color: skyblue}
	</style>
</head>
<body>
	<div class="header">我是头部</div>
	<div id="main">主体</div>
	<div class="footer">我是底部</div>
	
	<script>
		//第一步：监视锚点值的改变，
		//第二步：往里面塞数据
		window.addEventListener('hashchange',function(){
			var text = '';
			switch(location.hash){
				case '#/music':
					text = '各种音乐的数据';
					break;
				case '#/movie':
					text = '各种电影的数据';
					break;
			}
			document.getElementById('main').innerHTML = text;
		})
	</script>
</body>
</html>

对比了解一下vue.js的路由操作方式和DOM操作办法。

以上就是对于‘前端路由的监听’方法的粗略说明，可作为demo演示，了解一下。

草巾冒小子
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue3中路由监听(类似面包屑的实现)
m0_51431448的博客
02-09 3098
这里举个例子：就是类似于面包屑，会记录所有的打开过的页面，方便定位到某个页面。（因为这个例子核心就是路由监听） 思路： 首先首页会一直显示，不可以移除。 我这里把其他的路由对象存在Vuex中（mainTabs:[]），需要监听路由的变化，当路由改变就往里面push（注意这里需要判断一下，只有当前路由没在mainTabs里，才会往里面push）,因为存的都是路由对象，点击就跳转到对应的页面就可以。然后就是，当我们移除的时候直接splice删除掉就可以（这里注意如果删除的是当前正打开的页面，需考虑页.
JavaScript实现监听路由变化
qq_42367749的博客
08-13 5094
前端实现路由变化主要有两种方式，这两种方式最大特点就是实现URL切换无刷新功能 ①通过hash改变，利用window.onhashchange 监听。 ②通过history的改变，进行js操作加载页面，然而history并不像hash那样简单，因为history的改变，除了浏览器的几个前进后退（使用 history.back(), history.forward()和 history.go() 方法来完成在用户历史记录中向后和向前的跳转。）等操作会主动触发popstate 事件，pushState，re.
JS实现监听路由变化
qq_35078403的博客
02-26 7036
JS实现监听路由变化 前言 同事最近正在做一个专项，叫Mapping数据采集系统。 他给我抛出了一个问题如何用原生js实现路由监听拦截并添加事件获取当前页面路径。（扬言你网上搜不到，还说给我一周都想不出来！！着实过分啦） 找到了这篇：https://juejin.cn/post/6844903790508933133#comment （啪啪被打脸hhhh～[坏笑ing]） 功能诉求：监听拦截路由变化 开始前可以温习一下，前端路由的概念：你所理解都前端路由是什么？ 我们知道前端路由实现方式有两种： 哈希
【Vue基础版】三天学会Vue，Vue详细学习笔记
最新发布
每天進步一點點
06-27 1330
Vue学习笔记 一、Vue基础知识 1、简介 构建用户界面的渐进式框架 官网：https://v2.cn.vuejs.org/ 学习一个技术，最重要得就是技术官网。 2、初识VUE root容器里面依然符合Html规范，只不过是加入了一些特殊的Vue语法 实例和容器是一一对应的。 真实开发中只有一个Vue实例，并且会配合着组件一起使用； {{ xxx }}中的xxx要写js表达式（js表达式是会产生一个值，可以放在任何需要值的地方，这与js语句是不同的），且xxx可以读到data中的所有用到的属性
Vue-router 中 hash 和 html5 两种路由监听方式
weixin_43443341的博客
12-15 1756
如果你用过 Vue，那你一定知道 vue-router，它给开发者提供了两种路由方式。这两种不同模式的路由方式，它们对路由的监听方式也不同。
js无刷新监听url的变化
weixin_43274097的博客
04-12 1575
原生js监听url变化
前端笔记(10) Vue3 Router 监听路由参数变化
Java Spring Elasticsearch
08-11 1万+
Vue Router是开发Vue项目的必不可少的工具，也是极为重要的学习要点。本篇介绍下Vue Router的基础使用和如何监听路由参数变化。
JS实现前端路由功能示例【原生路由】
10-15
在现代Web应用中，前端路由（Frontend Routing）扮演着至关重要的角色，它允许开发者在不重新加载整个页面的情况下响应URL的变化，实现单页应用程序（Single-Page Applications, SPA）的功能。本文将深入探讨如何...
Javascript实现前端简单的路由实例
10-21
本文将使用javascript实现一个极其简单的路由...WEB开发中路由概念并不陌生，我们接触到的有前端路由和后端路由。后端路由在很多框架中是一个重要的模块,同样前端路由在单页面应用也很常见，它使得前端页面体验更流畅。
vue监听浏览器原生返回按钮,进行路由转跳操作
10-14
在使用Vue.js开发前端应用时，我们经常会使用到vue-router这一官方路由管理器。但当用户在浏览器中点击返回按钮时，如果开发者没有处理好相关的逻辑，就可能会导致用户体验上的问题，比如页面跳转错误、数据不一致等...
vue-router使用笔记——监听路由变化的方法
qq_43115213的博客
08-26 2232
监听路由变化的方法 1.watch 需要注意的是，只能监听到子路由的改变。 Person.vue <template> <div id="person"> <h1 @click="toMain">个人中心</h1> <p>这里是个人中心，欢迎访问个人相关信息</p> <router-link to="/person/user">用户信息</router-link> &lt
VUE监听路由变化的几种方式
小星落
04-22 660
VUE页面开发中，我们经常需要根据路由的变化去实现一些操作，那么如何监听路由的变化呢？ 监听路由从哪儿来到哪儿去 watch:{ $route(to,from){ console.log(from.path);//从哪来 console.log(to.path);//到哪去 } } 监听路由变化获取新老路由信息 watch:{ $route:{ handler(val,oldval){ console.log(val);//新路由信
Vue 监听路由变化的三种方式
热门推荐
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
08-25 3万+
方法一：通过 watch // 监听,当路由发生变化的时候执行 watch:{ $route(to,from){ console.log(to.path); } }, 或 // 监听,当路由发生变化的时候执行 watch: { $route: { handler: function(val, oldVal){ console.log(val); }, // 深度观察监听 deep: true } }, 或 // 监听,..
原生js监听href url路径变化
hzxOnlineOk的博客
12-07 6498
移动端直接使用： function listenHrefChange() { //监听href变化 触发更新图表 window.onhashchange = function () { getMap(orgIdRef.current); }; } PC端如需兼容IE 则使用： //监听触发操作 function hrefChange(){ console.log("url路径产生了变化") } //url变化监听器 if( ('onhashcha..
前端Vue监听路由变化， 点击页面内按钮跳转菜单更改导航菜单选中状态
江咏之
05-09 4501
实际项目开发中有时候需要根据路由的变化去实进行一些操作，在此，我总结了三种方法。 1、watch监听 // 监听,当路由发生变化的时候执行 watch:{ $route(to,from){ console.log(to.path); } }, 或者 // 监听,当路由发生变化的时候执行 watch: { $route: { handler: function(val, oldVal){ console.log(val); }, // 深度观察监听 .
Vue中监听路由参数变化的几种方式
青春木鱼的博客
08-08 1万+
在开发vue项目的过程中，经常会对某些页面或全局项目的路由进行监听，当路由发生变化的时候去执行某些操作，因此本文总结了监听路由的几种方式
详解JavaScript实现监听路由变化
pzpcxy520的博客
02-14 845
通过history的改变,进行js操作加载页面,然而history并不像hash那样简单,因为history的改变,除了浏览器的几个前进后退(使用 history.back(), history.forward()和 history.go() 方法来完成在用户历史记录中向后和向前的跳转。)等操作会主动触发popstate 事件,pushState,replaceState 并不会触发popstate事件。前端实现路由变化主要有两种方式,这两种方式最大特点就是实现URL切换无刷新功能。
vue监听路由变化的方式
qq_45585640的博客
02-09 1633
监听路由变化的几种方式小结
如何监听路由变化
weixin_35752645的博客
12-21 610
在 Vue.js 中，您可以使用路由实例的 $route 属性来监听路由变化。这个属性是一个对象，包含了当前路由的信息，比如路径、参数、哈希以及路由视图的配置信息。 您可以使用 Vue.js 的 watch 特性来监听这个属性的变化，例如： new Vue({ el: '#app', router, template: '<App/>', components: { A...
React前端路由详解与react-router-dom应用
前端路由主要发生在浏览器端，如当URL变化时，会切换显示相应的组件。 3. 路由分类： - 后端路由：在服务器端处理，如Node.js的`router.get(path, function(req, res))`，根据请求路径找到匹配的路由并执行相应...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值