详解JavaScript实现监听路由变化

于 2024-02-14 18:00:36 发布
阅读量609 收藏 11
点赞数 6
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pzpcxy520/article/details/136114698
版权

 

  • 前端实现路由变化主要有两种方式,这两种方式最大特点就是实现URL切换无刷新功能

  • 通过hash改变,利用window.onhashchange 监听。

  • 通过history的改变,进行js操作加载页面,然而history并不像hash那样简单,因为history的改变,除了浏览器的几个前进后退(使用 history.back(), history.forward()和 history.go() 方法来完成在用户历史记录中向后和向前的跳转。)等操作会主动触发popstate 事件,pushState,replaceState 并不会触发popstate事件。

pzpcxy520
关注
  • 6
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Vue watch 使用方法详解，及路由监听
Smile0L0的博客
07-24 1003
Vue 中可以通过 watch 自定义侦听器，来响应数据的变化，支持对 data，props，computed 中的数据进行监听。 基本用法 基本类型监听 data () { return { name: '小黑', age: 300, isSpirit: true } }, watch: { name: function (newVal, oldVal) { console.log('name发生了变化：newVal:' + newVal + '
Vue教程11：利用JS实现路由跳转，路由监听和导航守卫
weixin_34265814的博客
12-15 554
示例代码请访问我的GitHub： github.com/chencl1986/… 利用JS实现路由跳转 代码示例：/lesson10/01. vue-router 最基本的路由.html 使用this.$router.push方法可以实现路由跳转，this.$router.replace实现替换当前路由。 两个方法的第一个参数可为string类型的路径，或者可以通过对象将相应参数传入。 通过t...
js写一个路由监听
TANKING，开源开发者！
03-21 2091
需要注意的是，在这个示例中我们只监听了 URL 的路径部分，如果需要监听整个 URL，包括查询参数和 hash 值，可以使用。要实现一个简单的路由监听，可以使用浏览器自带的。
Javascript:监听路由变化
最新发布
czw15913934496的博客
08-16 739
记录一下
JS实现监听路由变化
qq_35078403的博客
02-26 6985
JS实现监听路由变化 前言 同事最近正在做一个专项，叫Mapping数据采集系统。 他给我抛出了一个问题如何用原生js实现路由监听拦截并添加事件获取当前页面路径。（扬言你网上搜不到，还说给我一周都想不出来！！着实过分啦） 找到了这篇：https://juejin.cn/post/6844903790508933133#comment （啪啪被打脸hhhh～[坏笑ing]） 功能诉求：监听拦截路由变化 开始前可以温习一下，前端路由的概念：你所理解都前端路由是什么？ 我们知道前端路由实现方式有两种： 哈希
JavaScript实现监听路由变化
qq_42367749的博客
08-13 4724
前端实现路由变化主要有两种方式，这两种方式最大特点就是实现URL切换无刷新功能 ①通过hash改变，利用window.onhashchange 监听。 ②通过history的改变，进行js操作加载页面，然而history并不像hash那样简单，因为history的改变，除了浏览器的几个前进后退（使用 history.back(), history.forward()和 history.go() 方法来完成在用户历史记录中向后和向前的跳转。）等操作会主动触发popstate 事件，pushState，re.
详解Vue 如何监听Array的变化
10-16
主要介绍了详解Vue 如何监听Array的变化，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Javascript添加监听与删除监听用法详解
10-25
主要介绍了Javascript添加监听与删除监听用法,较为详细的分析了javascript原理与用法,并补充说明了事件监听的兼容性问题,非常具有实用价值,需要的朋友可以参考下
详解堆的javascript实现方法
10-21
最近因为工作需要，要深入的学习JavaScript，发现如果囫囵吞枣印象就是不...本文主要是详解堆的javascript实现方法，另外堆排序对我们来说太耳熟而又少用的情况下，本文当作一次复习。感兴趣的朋友们下面来一起看看吧。
详解Javascript继承的实现
10-22
主要介绍了详解Javascript继承的实现的相关资料,需要的朋友可以参考下
怎么监听路由上的参数变化刷新页面
有问题可关注公众号：前端研究院 后台输入问题回复
09-09 260
watch: { $route: { handler: function(val, oldVal){ console.log(val); } } }
JS实现URL变化监听器
kevin.yau
08-06 1万+
需求需要给一些文章做分页，那前段就需要有分页的页码。 流程是这样的，点击页码，url地址#后的参数发生变化，监听器监听到url发生变化，实现文章内容列表变化。实现以下为监听器的实现代码//监听触发操作 function hashChangeFire(){ alert("1231561") }//url变化监听器 if( ('onhashchange' in window) && ((typ
怎么监听路由的改变的两种方式（watch，路由守卫）
weixin_56115652的博客
09-17 293
有时候在项目中要监听路由的变化，如路由传值等 。 warth（监听路由） warth监听路由的参数按常规的 。
html位置发生变化监听,用JS实现监听URL地址变化的教程
weixin_42422285的博客
06-08 7655
最近一直在写单页模版，需要使用 js 来监听浏览器地址栏中 url 地址的变化，并做出相应的改变。而这篇文章就来说一说，使用用 JS 代码来监听浏览器地址栏URL地址的变化的方法。js onhashchange 事件当前的url地址发生改时(锚点部或参数部分)，可以触发 js 中的 onhashchange 事件。以调用都可以触发 js 的 onhashchange 事件1、使用不同书签导航到当前...
js：如何监听history的pushState方法和replaceState方法。（高阶函数封装+自定义事件）
qq_44697303的博客
09-22 2874
出现原因： 想要监听路由变化就需要监听history的pushState和replaceState事件，但是原生并没有支持，此时，我们就得自己添加事件监听。 解决方法： 高阶函数封装自定义事件： const bindHistoryEvent = function(type) { const historyEvent = history[type]; return function() { const newEvent = historyEvent.apply(this, argum
JS监听浏览器地址栏URL变化
热门推荐
松林羊的博客
10-18 1万+
假设业务场景：视屏or图片只在首页展示。 URL格式：http://localhost:4000/page/2/ HTML中实现 <body onhashchange="myFunction()"> </body> <script> function myFunction() { var href = window.location.href; var id...
JavaScript如何实现history路由变化监听
weixin_33859504的博客
03-05 7454
前言 大家都知道，通过浏览器的地址栏来改变切换页面，前端实现主要有两种方式： ①通过hash改变，利用window.onhashchange 监听。 ②通过history的改变，进行js操作加载页面，然而history并不像hash那样简单，因为history的改变，除了浏览器的几个前进后退（使用 history.back(), history.forward()和 history.go() 方法...
uniapp路由传多个参数_原生 js 实现一个前端路由 router
weixin_39949297的博客
11-20 1085
效果图：项目地址：https://github.com/biaochenxuying/route效果体验地址：1. 滑动效果： https://biaochenxuying.github.io/route/index.html2. 淡入淡出效果： https://biaochenxuying.github.io/route/index2.html1. 需求因为我司的 H 5 的项目是用原生 js ...
前端路由实现原理（history）
dzqxwzoe的博客
02-07 384
首页'+count[0]+'新闻'+count[1]+'关于'+count[2]) // history.replaceState(count,null,'');$('#router').html('首页'+state[0]+'新闻'+state[1]+'关于
vue动态路由实现过程详解
06-08
动态路由是指在路由匹配时，根据参数的不同动态生成不同的路由。在Vue中，实现动态路由需要以下几个步骤： 1. 在路由配置中定义动态路由，将参数用冒号(:)包裹，例如： ``` { path: '/user/:id', component: User } ``` 2. 在组件中通过 `$route.params.id` 获取动态参数，例如： ``` <template> <div> <h2>User ID: {{ $route.params.id }}</h2> </div> </template> ``` 3. 通过编程式导航跳转到动态路由，例如： ``` router.push('/user/' + userId) ``` 其中，`userId` 是动态参数。 通过以上步骤，就可以实现Vue动态路由。需要注意的是，动态路由的参数可以是任意字符，包括中文等特殊字符，但是需要注意编码问题。另外，动态路由也可以嵌套使用，例如： ``` { path: '/user/:id', component: User, children: [ { path: 'profile', component: UserProfile } ] } ``` 这样就可以访问 `/user/123/profile`，其中 `123` 是动态参数。在 `UserProfile` 组件中，仍然可以通过 `$route.params.id` 获取动态参数。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

pzpcxy520

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值