vue router push 跳转自己不会触发生命周期函数

最新推荐文章于 2023-12-08 15:17:39 发布
最新推荐文章于 2023-12-08 15:17:39 发布
阅读量1.9k 收藏
点赞数
分类专栏： vue 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/homecrane/article/details/122743764
版权

有一种解决方案是，利用watch监视 $route ，发生改变时触发生命周期函数里的方法

watch:{
    $route(){
        this.init()
        //等其他初始化方法
    }
}

homecrane
关注
专栏目录
vue-router重写push方法,解决相同路径跳转报错问题
10-14
const routerPush = Router.prototype.push ``` 接着，我们将创建一个新的`push`方法来覆盖原有的`push`，这个新方法会在遇到相同路径时添加一个随机参数，从而强制更新视图： ```javascript Router.prototype....
Vue this.$router.push(参数)实现页面跳转操作
10-14
const router = new VueRouter({ routes: [ { name: "MediaSecond", path: "/MediaSecond", component: MediaSecond } ] }); ``` 然后，我们可以这样跳转并传递参数： ```javascript this.$router.push({name...
解决vue+router路由跳转不起作用的一项原因
10-15
主要介绍了解决vue+router路由跳转不起作用的一项原因，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue使用$router.push()或者$router.go(),重新返回上一页不走生命周期
最新发布
weixin_47586598的博客
12-08 1119
是因为在App.vue中，vue路由（router-view）组件使用路由缓存组件(keep-alive)包裹着，导致不重新走生命周期，这样可以提高运行效率，但有时候，我们需要重新加载生命周期刷新数据。在router-view组件中添加key值，唯一标识。
vue3使用this.$router.push跳转后页面生命周期内的请求数据不重载问题
搞代码的博客
12-05 1836
vue3使用this.$router.push跳转后页面生命周期内的请求数据不重载问题 场景： 原因： 解决办法：
VUE this.$router.push跳转页面传值不同 created 函数只调用一次 页面不刷新解决办法
alokka的博客
07-09 7398
问题： 在vue中使用 this.$router.push() 方法，如果只是传入的参数不同，会出现 url 地址变化了，但是页面没有重新请求数据，生命周期函数未调用，需要刷新一下页面才有新的数据加载。 原因： 由于 Vue 会复用相同组件, 即 /page/1 => /page/2 或者 /page?id=1 => /page?id=2 这类链接跳转时, 将不在执行 created, mounted 之类的钩子, 这时候你需要在路由组件中, 添加 beforeRouteUpdate 钩子来执行
VUE 动态路由配置，以及vuerouter生命周期函数失效的问题
LYSMQ的博客
09-04 826
VUE 动态路由配置，以及vuerouter生命周期函数失效的问题 如何配置动态路由 在router/index下配置 { path:'/user:id',//使用:就可以将id变为动态绑定 name:'user' } 遇到的问题 组件会复用，生命周期函数不会被重新执行 解决方法 监听路由变化 watch watch:{ $route:(to,from)=>{ console.log(to.$route.params.id)//路由导航时传递的id } } beforeRo
vue-router3.0版本中 router.push 不能刷新页面的问题
11-30
分析原因，问题的核心在于`router.push`的调用者与Vue实例的`this.$router`不是同一个对象，导致Vue-Router的生命周期钩子和组件更新机制无法正确触发。在Vue-Router的旧版本中，可能存在某种隐式共享或单例模式，...
vue-router 2.0 跳转之router.push()用法说明
11-19
`router.push(location)` 方法允许我们在代码中触发导航。`location` 参数可以是一个字符串路径或一个描述地址的对象。例如： 1. 字符串形式： ```javascript router.push('home'); ``` 2. 对象形式，包含路径...
vue路由this.route.push跳转页面不刷新
felix
07-26 795
Vue路由this.route.push跳转页面不刷新 一、背景 介绍：在vue项目开发中，使用路由进行页面跳转时，路由所跳转的页面不进行刷新。也就是vue生命周期函数没有执行(created、mounted钩子函数)。 案例： A页面： B页面： 问题： 当在A页面第一点击按钮到B页面时，一切正常，当返回到A页面再次点击按钮时，B页面没有执行mounted钩子函数，结果导致mounted函数中查询方法不执行。 二、解决方法： 1、使用activated:{}周期函数代替mounted:{}函数即可。 2、
this.$router.push跳转到原来页面不刷新的问题解决
weixin_42349568的博客
04-07 4674
一，现象 现在的情况是编辑页面编辑更新数据后，返回旧界面，应该触发生命周期函数，重新获取数据的，但是生命周期函数并没有触发。 二，原因分析 主要原因是使用了keep-alive对组件进行了缓存，而后改用actived生命周期函数，依旧是无效，这大概率是因为我当初为了做面包屑导航，使用了嵌套路由的结构： 也就是现在导致返回上一级路由时，不触发actived生命周期函数了。 三，解决方案 这个页面不使用缓存，并且给router-view加上key <keep-alive exclude="dishe
解决：this.$router.push()同一路由不同参数，视图不更新问题
一个昵称叫铃风的小前端
05-10 3799
一.不触发生命周期 1.监听route，在监听函数内操作数据 2.在事件函数内操作数据 二.触发生命周期 3.this.$forceUpdate() 4.给根元素绑定v-if：触发重新渲染 5.给根元素绑定:key：通过更改key触发重新渲染 ...
VUE使用router.push实现页面跳转和传参
一颗哈士奇的博客
02-26 6105
vue项目中在需要不同页面之间跳转并且传递数据时，通常会使用router.push较为方便，当然使用windows.href和sessionStorage一起用也可以达到效果，但是sessionStorage通常储存的是全局性常用的变量。一起来看router.push的使用方法： 1.不传参数的跳转： this.$router.push('./lastPage')//跳转至当前目录的lastPag...
Vue页面中使用this.$router.replace访问同一页面，数据不刷新的问题
qq_39182029的博客
05-13 9962
Vue页面中使用this.$router.replace访问同一页面，数据不刷新的问题 问题原因： vue路由切换实际是组件间的切换，在我的详情页中，钩子方法使用的是created()方法，在不强制刷新或者重启时只会创建一次，所以引用相同组件的时候，页面数据就无法刷新。 我的解决方法： 方法1.在详情页添加一个watch监听路由变化（不推荐，每次返回时会刷新一次列表数据，用户体验不好） watch：{ '$route' (to,from){ this.$router.go(0); } } ​
09-Vue生命周期
码字不易，大家的支持就是我坚持下去的动力
11-29 915
Vue生命周期 📋前言📋💝博客：【无聊大侠hello word】💝✍有一点思考，有一点想法，有一点理性！✍✍本文由在下【无聊大侠hello word】原创，首发于CSDN✍mounted、另外还有一些其他和路由相关的生命周期钩子。销毁后借助Vue开发者工具看不到任何信息销毁后自定义事件会失效，但是之前通过v-bind绑定的原生DOM事件（on-click等）依然有效一般不会在中操作护具，因为即使操作数据，也不会再触发更新流程了。先赞后看，养成习惯！！！码字不易，大家的支持就是我的坚持下去的动力。
解决Vue跳转路由不触发Created、Mounted等生命周期钩子函数问题。
ZhangBin0612的博客
02-16 4293
解决Vue跳转路由不触发Created、Mounted等生命周期钩子函数问题。
Vue 生命周期流程一览
博客
04-14 382
Vue 生命周期 此帖子应该对照着官方提供的 Vue生命周期图 来看 本文参考了B站的这个视频 和 思否的这篇文章 注：思否的文章貌似存在争议，但本人水平有限，无法从文章中看到错误，如果想要参考那篇文章，请一定要看看文章评论区。 一、Vue 生命周期是什么 按照我自己的理解，不同的生命周期就是不同的钩子函数，各个钩子函数会负责它所处理的阶段。在这个阶段中，函数被调用，完成默认的功能，当然我们也可以在这些函数中写入代码，添加一些我们需要的功能。 Vue 生命周期其实指的是每个组件的一些默认功能。 再通
Vue中常用钩子函数(生命周期、路由拦截等)执行顺序
qq_40868156的博客
08-21 3121
一、生命周期函数 beforeCreated : 完成Vue实例化对象的创建，this能访问到当前实例化对象，但this.$data访问不到当前组件data定义的数据 created: model数据层初始化，data，props设置数据劫持，methods代理在vue实例上，computed，watch封装成不同类型的watcher，this.$data能够访问到定义的数据和方法 beforeMount: 将template模板编译成render函数，进行dom渲染，此时未挂载到$el控制的dom元素上
uniapp 通过this.$router.push跳转页面为什么生命周期函数不执行呢
06-10
在使用 `this.$router.push` 跳转页面时，当前页面的生命周期函数不会被执行，是因为页面并没有被销毁，而是被缓存起来了。这是由于 `uniapp` 中的页面缓存机制导致的。 如果需要在页面跳转时执行生命周期函数，可以通过在 `App.vue` 文件中的 `onShow` 函数中监听页面跳转事件，然后手动触发要执行的生命周期函数。 例如，在 `App.vue` 文件中可以这样写： ```js export default { onShow() { uni.$on('page-show', (pageName) => { const page = getCurrentPages().find(page => page.__route__ === pageName) if (page) { page.onShow && page.onShow() } }) } } ``` 然后在需要执行生命周期函数的页面中，在 `onShow` 函数中手动触发 `page-show` 事件即可。 例如，在需要执行生命周期函数的页面中可以这样写： ```js export default { onShow() { uni.$emit('page-show', '/pages/xxx/xxx') } } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值