vue router在同界面使用 this.$router跳转路由,mounted不再调用

最新推荐文章于 2024-07-06 15:37:39 发布
最新推荐文章于 2024-07-06 15:37:39 发布
阅读量1.1k 收藏
点赞数
分类专栏： VUE基础学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39020164/article/details/93616948
版权
在Vue应用中，使用`this.$router.push('/')`在当前页面跳转时，`mounted`和`created`钩子不会重新执行，且`destroyed`未触发。相比之下，`this.$router.go(0)`会导致页面闪烁和留白问题。为解决这个问题，开发者直接通过更新数据来实现页面刷新。此外，文章提到了使页面在跳转时回到顶部的三种方法，尤其在手机端，官方推荐的滚动行为可能不起作用，需要采用其他策略。
摘要由CSDN通过智能技术生成

1.在vue中,刷新数据常用的办法是 this. r o u t e r . g o ( 0 ) 或 者 t h i s . router.go(0)或者this. router.go(0)或者this.router.push({path: ‘/’}),在最近一次的使用时,发现this. r

最低0.47元/天 解锁文章
Halo小武
关注
专栏目录
Vue 3 也有生老病死
人生代码 ---- 公众号
11-27 3144
生命周期钩子 从今天开始我们开始学习 Vue 生命周期钩子，就像人的一生一样短暂，充满着未知情况，从一开始的出生，小孩，少年，青年，中年，晚年，直到死亡那刻来临，每一个阶段都会处理不同的事情，人的整个生涯就算走完。Vue 实例也一样有着一个完整的生命周期，也就是说从开始创建，初始化数据，编译模板，挂载DOM，渲染-更新-渲染，卸载等一系列过程，构成为 Vue 实例的生命周期，钩子就是在某个阶段做一些处理。 beforCreate (创建前) 在实例初始化之后，数据观测和事件配置之前被调用，此时组件的选项对
解决this.$router跳转路由，mounted不再调用
weixin_54362381的博客
01-03 1922
解决this.$router.push()跳转路由，跳转后mounted不再调用的问题
vue3路由跳转 跳转新页面后不执行onMounted
最新发布
One__buyaomanggu的博客
07-06 761
watch(nums, (newValue, oldValue) => {console.log('watch 已触发', newValue)})vue3 跳转页面不执行onMounted：用watch函数。//跳转到生产记录页面。
vue多次跳转同一页面不触发created和mounted，没有初始化
我的博客
12-24 5674
问题： 从gtiHub上拉的后台管理系统的代码 vue-admin-template模板，从列表页跳转进详情页，只在第一次跳转时加载created和mounted，第二次直接使用页面缓存了，查了半天，发现原因就在开发者的“手摸手”系列的官方文档中…真是对自己的大无语事件 上代码： 解决方法： 一般大家应该都是这样实现页面跳转，但会发现id=001和id=002的在页面上的数据时一样的，然后控制台打印几条信息就会发现是因为第二次进页面时不会触发vue的created或者mounted钩子，官方说你可以通过w
vue路由跳转不执行mounted方法
JiAyInNnNnN123的博客
08-18 8289
2.在路由配置中，当前组件使用了keepalive 导致有缓存，可以不使用keepalive，正常使用mounted生命周期进入即可。activated：被 keep-alive 缓存的组件激活时调用。一进入页面就触发，可用于初始化页面数据。就是解决本文的方式。问题：列表页面，进入详情，使用route跳转传值，进入详情。首次进入执行mounted方法，二次进入不执行mounted方法。离开页面就触发，用于离开清楚当前页面的定时器。keepalive：用于保存组件当前状态，以避免反复重新渲染导致的性能问题。.
Vue路由this.route.push跳转页面不刷新
热门推荐
CoderYin的博客
04-29 2万+
Vue路由this.route.push跳转页面不刷新 一、背景 介绍：在vue项目开发中，使用路由进行页面跳转时，路由所跳转的页面不进行刷新。也就是vue生命周期函数没有执行(created、mounted钩子函数)。 案例： A页面： B页面： 问题： 当在A页面第一点击按钮到B页面时，一切正常，当返回到A页面再次点击按钮时，B页...
【解决】this.$router.push跳转到另一个页面mounted事件不执行。拿不到this. $route.query的值。（vue2/vue3））
huangfuyk.的博客
08-14 3187
使用this.$router.push({path: ‘xxxx’, query: {id: “1”}})跳转到“xxxx”页面时，发现跳转成功且地址栏显示id=1，但是在该页面的mounted方法里却拿不到this. $route.query.id的值。发现该页面在app.vue文件中被。...
解决vue.js this.$router.push无效的问题
10-18
- 使用浏览器的开发者工具来调试，查看this.$router.push被调用时this的确切值，以及路由跳转时浏览器的具体行为。 总结来说，解决this.$router.push无效的问题通常需要从Vue Router的配置、this指向、生命周期、...
vue this.$route和this.$router的区别，用例子说明
08-17
this.$router是一个用来控制路由跳转的工具对象，可以通过调用它的方法来实现路由的跳转。 举个例子来说明区别。假设我们有一个简单的Vue应用，有两个组件：Home和About。在路由配置中，我们设置了两个路径："/home...
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
10-15
在进行前端开发过程中，尤其是使用Vue.js框架时，会不可避免地遇到需要在多个组件间共享方法或者管理全局状态的场景。本文将重点介绍两个方面：一是如何在Vue项目中引用公共方法，二是如何通过Vuex中的this.$***mit...
Vuejs路由配置项和$router二十三
qq_50563868的博客
05-06 482
//index.js { name: 'xiangqing', path:'detail/:id/:title', component: Detail, // props: {a:1,b:'hello'} // props: true props($route) { return { id:$route.params.id, title:$route.params.title } } <-- !detail.vue--> &l
vue router 传参获取不到的解决方式
12-13
在当前路由中有一个toArticle方法可以跳转到article页面 methods:{ toArticle:function(index) { this.$router.push({path:'/article',params:this.blogList[index]}); } } 在article中接受不到params ...
2020年的12个Vue.js开发技巧和窍门
前端全栈开发者
04-18 1690
我真的很喜欢使用Vue.js，每次使用框架时，我都会喜欢深入研究其功能和特性。通过这篇文章，我向你介绍了十个很酷的提示和技巧，你可能尚未意识到这些技巧和窍门，以帮助你成为更好的Vue开发人员。 更漂亮的插槽语法 随着Vue 2.6的推出，已经引入了插槽的简写方式，可用于事件（例如，@click 表示 v-on:click 事件）或冒号表示方式用于绑定（:src）。例如，如果你有一个表格组件，你可...
vue 使用同一组件，切换时不触发created、mounted钩子
weixin_30367543的博客
02-11 4660
两个页面参数不同使用同一组件，默认情况下当这两个页面切换时并不会触发created或者mounted钩子。 方法一：通过watch $route的变化来做处理 watch: { $route() { if (this.$route) { ... } } }, 方法二：在 router-view上加上一个唯一的ke...
vue 跳转 同一路由不刷新问题解决
weixin_41581551的博客
12-07 1320
vue跳转同一路径时，路由参数改变，但页面无法更新 问题原因 vue路由切换实际是组件间的切换，引用相同组件的时候，页面就无法更新 解决方案 方案1.watch监听路由参数变化，并重新渲染（谨慎选择） 该可以实现页面重新加载数据效果，但会出现页面单独刷新出错，滚动条没有返回顶部问题，根据业务需要选择此解决方法 方案2. provide和inject结合使用(推荐使用) 实现思路：在app.vue目录下，对<router-view></router-view>进行摧毁和重
vue router 重新mounted_我总结了12个Vue.js开发技巧和窍门
weixin_39875675的博客
11-25 483
2020年第34期我真的很喜欢使用Vue.js，每次使用框架时，我都会喜欢深入研究其功能和特性。通过这篇文章，我向你介绍了十个很酷的提示和技巧，你可能尚未意识到这些技巧和窍门，以帮助你成为更好的Vue开发人员。更漂亮的插槽语法随着Vue 2.6的推出，已经引入了插槽的简写方式，可用于事件(例如，@click 表示 v-on:click 事件)或冒号表示方式用于绑定(:src)。例如，如果...
工作日记（十二）：完整项目开发之完美解决测试时vue跨域与mounted不执行问题
BHSZZY的博客
07-23 315
2020.7.22 今日继续开发前端。 顺便一提，前端用的vue框架是： vue-element-admin（elementUI） 今日前端需要与后端进行测试了（还不算正式联调，只在本地测试），因此解决了前后端分离时vue与本地项目端口不一致导致跨域无法访问的问题，具体如下： 一、完美解决测试时vue跨域问题(亲测可用)： 1.修改vue.config.js文件 将【项目/vue.config.js】文件中的devServer标签的内容改为： devServer:{ por..
路由跳转页面不触发 mounted 的原因
qq_36437172的博客
06-28 7705
路由跳转 handleAdd (type, row = {}) { // console.log(type, row) let param = `` if (type === 'copy') { param = `&capacityId=${row.id}` } this.$router.push({ path: `/capacityPool/list/addInquiry?type=${type}${p
解决使用this.$router.push()方法页面跳转后不加载mounted
weixin_44161676的博客
04-13 1196
跳转到页面后，跳转的页面无法加载mounted里的方法因此无法获取数据更新，只需在跳转页面加上监听。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值