vue多次跳转同一页面不触发created和mounted,没有初始化

问题:

从gtiHub上拉的后台管理系统的代码 vue-admin-template模板,从列表页跳转进详情页,只在第一次跳转时加载created和mounted,第二次直接使用页面缓存了,查了半天,发现原因就在开发者的“手摸手”系列的官方文档中…真是对自己的大无语事件

解决方法:

点击查看详情,发现 id=001和 id=002的在页面上的数据时一样的,因为没有触发vue的created或者mounted钩子,因为你进入的router.name是一样的,虽然参数变了,但是路由没有监听到。

  • “手摸手”给出的解决方法:
    在 router-view上加上一个唯一的key,来保证路由切换时都会重新渲染触发钩子了。这样简单的多了。
    < router-view />在App.vue页面,是这个模板封装好的路由跳转的组件
<router-view :key="key"></router-view>

computed: {
    key() {
        return this.$route.name !== undefined? this.$route.name + +new Date(): this.$route + +new Date()
    }
 }

在这里插入图片描述
代码一加,立刻生效
事实证明,一定要阅读官方文档!!!

补充 也可以这样:
全路径作为路由中唯一的key
在这里插入图片描述

  • 7
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值