vue history模式下$router.push为什么不会刷新页面

最新推荐文章于 2024-05-16 15:17:37 发布
最新推荐文章于 2024-05-16 15:17:37 发布
阅读量475 收藏
点赞数 7
分类专栏： vue 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chtazycdf/article/details/137966273
版权
本文解释了在Vue应用中，$router.push方法实际上调用了HTML5HistoryAPI的history.pushState()方法，这种操作不会导致页面刷新，而是将新的URL添加到浏览器的历史记录中。
摘要由CSDN通过智能技术生成

vue中$router.push 方法调用的是html5中的 History API: history.pushState( ) ,参考pushState，该方法不会刷新页面，会向浏览器的会话历史栈增加一个条目。

chtazy
关注
  • 7
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解vue-router 2.0 常用基础知识点之router.push()
08-30
本篇文章主要介绍了vue-router 2.0 常用基础知识点之router.push()，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue-router-h5-history:vue-router的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面
05-17
vue-routerHTML5 History 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。 const router = new VueRouter({ mode: 'history', routes: [...] }) 当你使用 history 模式时，URL...
vue路由history刷新 面试题.docx
10-26
vue路由history刷新 面试题.docxvue路由history刷新 面试题.docx
vue $router.push跳转同页面只是参数不同。但是页面数据不刷新的解决办法（图文版）
最新发布
weixin_45721912的博客
05-16 481
【代码】vue $router.push跳转同页面只是参数不同。但是页面数据不刷新的解决办法（图文版）
VUE this.$router.push跳转页面传值不同 created 函数只调用一次 页面不刷新解决办法
alokka的博客
07-09 7236
问题： 在vue中使用 this.$router.push() 方法，如果只是传入的参数不同，会出现 url 地址变化了，但是页面没有重新请求数据，生命周期函数未调用，需要刷新一下页面才有新的数据加载。 原因： 由于 Vue 会复用相同组件, 即 /page/1 => /page/2 或者 /page?id=1 => /page?id=2 这类链接跳转时, 将不在执行 created, mounted 之类的钩子, 这时候你需要在路由组件中, 添加 beforeRouteUpdate 钩子来执行
router.push不刷新（8种解决方案）
leveretz的博客
11-13 1万+
router.push不刷新（8种解决方案）
vue3使用router.push()页面跳转后，该页面不刷新问题
wang13679201813的博客
09-20 7340
这是一个常见问题，当使用push的时候，会向history栈添加一个新记录，这个时候，再添加一个完全相同的路由时，就不会再次刷新了。在页面跳转时加上params参数时间。在跳转到的页面，添加watch监视。
vue-router3.0版本中 router.push 不能刷新页面的问题
11-30
在 github 的 vue-router 中找到同样的一个问题：3.0.1版本通过router实例无法跳转 昨天发现有些路由不能正常跳转，找了一下发现都是那些实例化后使用 router.push 而不是直接使用 this.$router.push 的地方。 出现的情况是 router.push 后，url变化了，但是页面没有刷新，手动刷新一下才出现应有的画面。 我看了一下 package.json，我的 vue 和 axios 是没有写版本号，但 vue-router 明明写了版本号，怎么可能以前行的，现在就不行了呢？ 然后，我使用 npm view vue-router 查看后才发现使用的
vue this.$router.push 页面不刷新总结(8种解决方式----覆盖所有场景)
热门推荐
qq_38143787的博客
10-23 3万+
这其实是一个很常见的问题,当使用push的时候,会向 history 栈添加一个新的记录,这个时候,再次添加一个完全相同的路由的时候,就不会再次刷新了. 没有耐心的可以直接看第九种方式,绝绝子,适用所有场景. 解决办法有这么几种: 1. 添加activated函数。 activated（）{ 在这里插入代码片 } 2. 通过路由监听的方法。将mounted下的方法函数放到watch路由下 // 不推荐、用户体验不好 watch: { '$route' (to, from) { // 路由发
Vue路由this.$router.push跳转页面不刷新
Marray000的博客
11-01 5269
在vue项目开发中，使用路由进行页面跳转时，路由所跳转的页面不进行刷新。也就是vue生命周期函数没有执行(created、mounted钩子函数)。
vue中页面路由this.route.push跳转页面不刷新
IT博客技术分享
04-28 3799
注意:created()方法是无效的 方法:在需要刷新的页面添加以下内容 解决办法有两种： 1、使用activated:{}周期函数代替mounted:{}函数即可。 将mounted函数 替换成activated函数。 mounted(){ 在这里插入代码片 } ==》 activated（）{ 在这里插入代码片 } 2、监听路由 第二种：通过路由监听的方法。将mounted下的方...
vue $router.push 跳转到当前页面 地址栏变但是数据不刷新
qq_26241443的博客
03-30 2523
vue-router跳转页面时，如果name和当前页面的name一样，只是query的参数不一样，那么会导致页面内容不刷新，因为页面内容是在created中根据route中的参数来获取的，但是跳转当前页面不会出发created。
vue $router和$route的区别详解
01-22
一、router为VueRouter的实例，相当于一个全局的路由器对象，里面含有很多属性和子对象，例如history对象。。。经常用的跳转链接就可以用this.$router.push，和router-link跳转一样。。。 this.$router.push会往...
vue-router3.0.1.js.zip
08-04
Vue Router是Vue.js官方推荐的路由管理器，它与Vue.js深度集成，使得在单页面应用（SPA）中管理导航和页面状态变得简单易行。Vue Router 3.0.1是该库的一个版本，提供了许多特性以支持高效且灵活的路由配置。 Vue ...
Vue Router 中‘ this.$router.push ‘跳转页面不刷新的问题
暖一杯茶的博客
01-28 5090
在写vue项目 路由跳转时, 肯定遇到过 路由跳转到新页面后 通过接口查询得到的后台数据, 这时候再返回上一个页面再点击路由跳转的时候会发现 新页面通过接口查询的数据没有了。 这是因为再你第二次点击路由跳转的时候，你的初始函数方法mounted没有执行。 解决办法有两种： 第一种：将mounted函数 替换成activated函数。 第二种：通过路由监听的方法watch()。将mounted下的方法函数放到watch路由下（用户体验不好） ...
this.$router.push跳转不刷新解决
CHIHIRO1023的博客
10-09 718
this.$router.push跳转到新页面，页面没有刷新。在需要刷新的页面写上：beforeRouteEnter。
this.$router.push()跳转页面不刷新 （分页组件点击，query参数变化）
weixin_46331416的博客
02-23 3902
this.$router.push()跳转页面不刷新 问题： 我有一个动态路由：/page/:offset?,但是我用query传参的时候，页面却不刷新，
this.$router.push到当前页面，只是传入参数不同，页面不刷新的问题解决
高先生的猫
08-26 4086
问题 在vue中使用$this.router.push()方法，如果只是传入的参数不同，会出现url地址变化了，但是页面没有重新请求数据，需要刷新一下页面才有新的数据加载。 解决方式 方式1：监听路由的变化 在页面的watch中，监听$router的变化 watch: { $route (to, from) { this.$router.go(0) } } 其中this.$router.go(0)为刷新页面，但此方法可能在Safari中无法实现，还可以用js原生的方法：window.lo.
router.push页面不刷新问题解决-前端
qq_35193154的博客
05-08 761
【代码】router.push页面不刷新问题解决-前端。
h5中this.$router.push为什么失效
06-06
在H5中，`this.$router.push`失效可能有以下几种原因： 1. 没有正确引入Vue Router：在使用Vue Router时，需要先引入Vue Router并将其安装到Vue实例中，如果没有正确引入Vue Router或者没有正确安装，就会导致`this.$router.push`失效。 2. 传递的参数不正确：在使用`this.$router.push`时，需要传递一个包含路径和参数的对象，如果传递的参数不正确，就会导致`this.$router.push`失效。 3. 路由配置不正确：在使用Vue Router时，需要正确配置路由，如果路由配置不正确，就会导致`this.$router.push`失效。 4. 使用了错误的路由模式：在Vue Router中，有两种路由模式：hash模式和history模式。如果使用了错误的路由模式，就会导致`this.$router.push`失效。 以上是一些可能导致`this.$router.push`失效的原因，可以根据实际情况进行排查和解决。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值