[Vue] 生命周期和vue-router的切换钩子函数

69 阅读1分钟

关键字: created(), vue-router , transition, route

  1. Bug描述

    1. 多个路由使用了相同组件, 也就是页面的结构相同, 但是根据路由的不同,加载相同结构的不同数据(也就是api相同,但是参数根据路由进行变化)
    2. 比如/v1/videos?country=china和/v1/videos?country=us 这里不同的api相同, 但是参数不同
    3. 问题: 切换不同的路由的时候, 发现只有路由没有点击过才会加载数据, 但是点击了被点击过的路由便不会加载数据
    4. 图中的收件箱的新邮件已发邮件可以用相同组件, 简单用这个举个栗子吧 image
  2. 修复

    1. Vue.js组件的生命周期中, created()在组件被创建之后, 如果判断组件可以重用, 便不会再执行
    2. 如果切换不同的路由, 需要加载不同的数据, 可以把数据加载的操作放在 route 的data()中执行