使用 vue2 ,为路由加上keep-alive,生命周期函数的一些总结

146 阅读1分钟

先上代码

 created() {
    this.goodsList = JSON.parse(this.$route.query.goodsList);
    this.selectAddress();
    this.selectOrder();
    console.log("created");
    this.$bus.$on(
      "selectPath",
      // 使用箭头函数,静态this,保存当前vc对象的this,
      (data) => {
        this.path = JSON.parse(data);
        console.log(this.path, "inner");
      }

      // 若使用普通函数,动态this,需要绑定this
      // function (data) {
      //   this.path = JSON.parse(data);
      // }.bind(this)
    );
    console.log(this.path, "outer");
  },
  activated() {
    // 通过 $bus传递参数
    console.log("activated");
    this.item = JSON.parse(this.$route.query.detail);
    this.goodsList = JSON.parse(this.$route.query.goodsList);
    this.selectOrder();
  },
  methods: {
    // initData是address里的
    ...mapMutations(["initData", "initOrder"]),

    // 查询地址
    async selectAddress() {
      let res = await this.$API.getAddress();
      if (!res || !res.success) return;

      this.initData(res.data);
      //有默认收货地址
      if (this.defaultPath.length) {
        this.path = this.defaultPath[0];
      } else {
        this.path = res.data[0];
      }
    },
    // 查询订单
    async selectOrder() {
      let res = await this.$API.getOrder(this.order_id);
      if (!res || !res.success) return;

      this.initOrder(res.data);

      this.total = {
        price: res.data[0].goods_price,
        num: res.data[0].goods_num,
      };
    },

    //提交订单
    async goPayment() {
      // 判断是否选择了地址
      if (!this.path) return this.Toast("请填写收货地址");
      let res = await this.$API.submitOrder(this.order_id, this.selectList);

      if (!res || !res.success) return;
      let newArr = [];
      this.goodsList.forEach((el) => {
        newArr.push(el.goods_name);
      });

      //支付传递的参数
      let dataOrder = {
        orderId: this.order_id,
        name: newArr.join(""),
        price: this.total.price,
      };

      let payRes = await this.$API.paymentOrder(qs.stringify(dataOrder));
      if (!payRes || !payRes.success) return;
      //打开支付宝支付的页面
      window.location.href = payRes.paymentUrl;
    },
  },
};

问题 1 描述:页面每次打开,需要重新加载数据。比如在其他页面更新了数据,那么在订单页二次打开的时候需要加载最新数据,把加载数据方法写在mounted方法里,却没有执行,因为使用了 keep-alive 标签,其他的生命周期函数都不会执行

问题分析:因为路由中created和mounted会进行缓存的,除非在router.js中配置:keepAlive: false;(或者直接不加keepAlive配置项,也不会缓存)这样是把这个页面的路由缓存给关闭了;true为开启,false为关闭

问题解决方法

1.将要处理的方法,放在activated函数中

2.更改router.js中的配置项