vue路由跳转到相同组件无法初始化组件（无法刷新页面）

已于 2023-03-01 20:40:15 修改
阅读量301 收藏 2
点赞数
分类专栏： vue 文章标签： vue.js javascript 前端
于 2023-03-01 20:26:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dsafghljk/article/details/129289053
版权

直接让它跳过去我们手动给个刷新，下面的flashCom就是刷新当前路径的函数，用this.$router.push的话就加个then，用router-link标签的话就绑定这个方法就行了（@click.native）
在这里插入图片描述
在这里插入图片描述
上面不行，得按下面的写
在这里插入图片描述
我不懂前端，所以我也不知道to和：to的区别，但能跑起来就是完事大吉，哈哈–_–

JJpZh
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue相同路由跳转强制刷新该路由组件操作
11-19
想必大家在平时开发的时候可能遇到这种需求，在打开该菜单页面的情况下，再次点击菜单需要刷新该组件（销毁再创建）。而vue自身如果路由不变的情况下是不会这样做的，那么只能使用一些骚操作了。 1.在菜单的路由跳转上绑定一个随机query参数，例如时间戳或者随机数： this.$router.push({ path:"/xxx", query:{ t:Date.now(), }, }); 该操作会触发路由改变，但是组件内的状态没有初始化，因为组件没有被重建。 2.在路由容器上绑定key值： <router-view :key=”$route.path + $route.quer
vue如何做到只刷新当前组件不刷新整个页面
06-13 3805
只刷新当前组件不刷新整个页面
Vue多个路由复用同一个组件时造成跳转时公共组件created等方法不执行的解决方法
从入门到放弃的博客
11-08 1677
官方文档说明：https://router.vuejs.org/zh/guide/essentials/dynamic-matching.html 解决方案： 1）.将公共组件的created方法放入到一个新的函数中，例如 init() 2）.使用@Watch监控路由， @Watch($route) 3）.在created和watch里面分别使用 init()函数即可 例如 ...
vue2（路由3）编程式导航重复跳转同一路由报错解决
weixin_74285634的博客
06-26 1806
vue2（路由3）编程式导航重复跳转同一路由报错解决
Vue不刷新页面更新组件
qq_49723651的博客
05-26 1214
Vue不刷新页面更新组件 文章目录Vue不刷新页面更新组件router.go和router-view使用key属性 router.go和router-view 使用Vue我们可以实现组件化开发，有些时候，数据只存在于某个组件上，当数据发生变化时，我们只希望更新这个组件而不是刷新整个页面。 但是不管是使用this.$router.go(0)还是通过在````。前者会重新加载页面，后者虽然不会重新加载页面，但是会出现肉眼可见的页面空白，用户体验非常不好。 使用key属性 我们可以为要改变的标签设置一个key
导致VUE页面不刷新的几种情况以及解决方法
qq_30258721的博客
08-30 6159
参考文献 https://segmentfault.com/a/1190000022772025 1.Vue 无法检测实例被创建时不存在于 data 中的 property 原因：由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化，所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的。 场景： var vm = new Vue({ data:{}, // 页面不会变化 template: '<div>{{
vue多次跳转同一页面不触发created和mounted，没有初始化
我的博客
12-24 4994
问题： 从gtiHub上拉的后台管理系统的代码 vue-admin-template模板，从列表页跳转进详情页，只在第一次跳转时加载created和mounted，第二次直接使用页面缓存了，查了半天，发现原因就在开发者的“手摸手”系列的官方文档中…真是对自己的大无语事件 上代码： 解决方法： 一般大家应该都是这样实现页面跳转，但会发现id=001和id=002的在页面上的数据时一样的，然后控制台打印几条信息就会发现是因为第二次进页面时不会触发vue的created或者mounted钩子，官方说你可以通过w
Vue列表页跳转到详情页返回，页面不刷新保持原来的状态,实现刷新局部数据
w15635748705的博客
04-16 8761
这个问题我最后还是借鉴了大佬的经验，还是大佬牛 直接上教程 首先在router.js中的列表页中添加缓存的变量： { path: '/', name: 'home', // 列表页 component: home, meta: { keepAlive: true //此页面需要缓存 } 在列表详情页中添加缓冲变量（列表详情页视图不需要缓冲的话不用添加） { path: '/notedetail', name: 'noteDetail',
Vue中三种url跳转不刷新页面的方法
骨子里的偏爱
06-02 1799
Vue中三种url跳转不刷新页面的方法
vue初始化没反应可以换个位置
Java&Develop的博客
08-20 238
vue初始化没反应可以换个位置
浅谈针对Vue相同路由不同参数的刷新问题
12-11
这时我们进行路由跳转后会发现组件并没有刷新，在前一个路由组件的数据都保留了下来，这并不是我们想要的效果。 对于简单的数据更新，我们可以直接监听路由参数并重新获取路由的初始化数据即可， 但是对于有很多子...
vue用addRoutes实现动态路由的示例
01-19
之前在基于Vue实现后台系统权限控制一文中提到路由权限的实现思路，因为不喜欢在每次路由跳转的before钩子里做判断，所以在初始化Vue实例前对路由做了筛选，再用实际路由初始化Vue实例，代价是登录页需要从Vue实例中...
vue移动端项目底部导航，刷新页面保持原来的导航不变
01-20
都知道 移动端项目往往底部会有一个导航 ，但我们在vue每次初始化的时候 底部导航会重新回到首页，或者是用户直接登录购物车的时候,提示用户登录要跳转到 登录界面，这个时候底部导航应该是跟着跳转的，而不应该...
浅谈Vue页面级缓存解决方案feb-alive(上)
12-11
开发者无需因为动态路由或者普通路由的差异而将数据初始化逻辑写在不同的钩子里beforeRouteUpdate或者activated 开发者无需手动缓存页面状态，例如通过localStorage或者sessionStorage缓存当前页面的数据 feb-...
vue 组件页面互相跳转 不走created,mounted 问题
Nooneandyou_的博客
11-20 5259
vue页面跳转 想在created 或mounted中 使用初始化函数 不成功 eg： Vue 会复用相同组件, 即 /page/1 => /page/2 或者 /page?id=1 => /page?id=2 这类链接跳转时, 将不在执行 created,mounted 之类的钩子 1.需要在路由组件中, 添加 beforeRouteUpdate 钩子来执行相关方法拉去数据。 2.设置 router-view 的 key 属性值为 $route.fullPath <router-view
Vue数据更新，页面却没有更新的几种情况及解决方法
热门推荐
LFQP_的博客
03-27 2万+
Vue数据更新，页面却没有更新的几种情况及解决方法
Vue--Router--解决多路由复用同一组件页面不刷新问题
IT利刃出鞘的博客
08-24 8884
本文介绍如何解决Vue的多路由复用同一组件页面不刷新问题。
vue组件化组件同页面不刷新复用，数据不更新问题
weixin_52417514的博客
02-07 907
使用key解决同页面复用组件，组件内部数据不更新问题
vue不同路由跳转同一组件，界面不刷新的问题
weixin_42646650的博客
09-14 1240
vue不同路由跳转同一组件，界面不刷新的问题 vue不同路由跳转同一组件，页面不刷新； 在router-view上配置一个动态的key即可,这里采用时间戳 <router-view :key="$route.query.t" /> this.$router.push({ name:"...", query:{ t: Date.now(), }, }) ...
vue3 路由跳转找不到页面
最新发布
08-31
在Vue3中，由于`setup`组件是在初始化之前执行，所以无法直接使用`this.router.push`来进行跳转。取而代之的是，你需要从`vue-router`中引入`useRouter`函数，并在`setup`函数内部使用它来进行路由跳转。这样可以...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

JJpZh

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

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

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

打赏作者

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

抵扣说明：

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

余额充值