先上代码
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中的配置项