vue路由出口 二次进入页面组件 不执行created和mounted生命周期钩子

页面调用一次接口,第二次缓存之前的数据,没有渲染页面;

不会销毁再创建组件而是会复用组件,页面不会刷新。

解决:
方法一:实践成功


官方推荐的使用watch监听路由变化,组件中监听


注意:watch监听路由变化,我们的路由一定要有子路由,监听变化也紧局限在父子路由中,也就是我们这个路由一定要有子路由,在子路由跳转过程中会调用watch,能成功监听

watch: {
    $route(to) {
      if (to.path=='') {
        ...
      }
    }
},

方法二:实践成功


使用标签包裹,在页面添加actived钩子函数,将要执行的代码放入actived中。每次重新进入组件都会执行actived钩子
index.js

<keep-alive>
    <router-view/>
</keep-alive>

 页面组件中:

activated() {
    this.delCartsListSync([]);
    this.getCartList();
},

  • 1
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
对于Vue的学习感受,我觉得它是一个非常强大且易于使用的前端框架。以下是我对Vue的一些学习感受: 1. 监听器(Watchers):Vue的监听器允许你观察数据的变化并执行相应的操作。这对于处理数据的变化非常有用,例如在数据更新时执行一些逻辑或者发送网络请求。Vue的监听器让我感到很方便,可以轻松地跟踪数据的变化。 2. 生命周期钩子(Lifecycle Hooks):Vue提供了一系列的生命周期钩子函数,用于在组件生命周期各个阶段执行自定义的代码逻辑。这些钩子函数包括`created`、`mounted`、`updated`等等。通过生命周期钩子函数,我可以在组件的不同阶段执行一些初始化、数据请求或清理的操作。 3. 组件通信:Vue提供了多种组件通信的方式,包括父子组件间的props和事件,以及兄弟组件间的事件总线、Vuex等。这使得组件间的数据传递和通信变得非常灵活和方便。我发现使用这些机制可以很容易地实现组件间的数据共享和通信。 4. 路由Vue Router):Vue Router是Vue官方提供的路由管理器,它允许我们在应用实现页面之间的跳转和导航。Vue Router提供了诸多功能,例如路由参数、动态路由、嵌套路由等等。学习和使用Vue Router使得我能够轻松地构建单页应用,并实现页面间的切换和导航。 总的来说,我对Vue的学习感受非常积极。它提供了丰富的功能和简洁的语法,使得我能够快速构建出高质量的前端应用。同时,Vue的文档和社区也非常活跃,这让我在学习和使用Vue时能够获得很多帮助和支持。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值