老师,关于order页面的mounted钩子函数里的问题

来源:13-4 微信支付状态轮询

拍拍你的头

2021-06-23

mounted(){
    let path=this.$route.path;
    if(path=='/order/confirm'){
      this.title='订单确认';
      this.tip='请认真填写收货地址';
    }else if(path=='/order/list'){
      this.title='订单列表';
      this.tip='请谨防钓鱼链接或诈骗电话,了解更多>';
    }else if(path=='/order/pay'){
      this.title='订单支付';
      this.tip='请谨防钓鱼链接或诈骗电话,了解更多>';
    }else{
      this.title='订单支付';
      this.tip='请谨防钓鱼链接或诈骗电话,了解更多>';
    }
  },

如果像这样写,我们的orderHeader组件并不会显示正确的title信息,比如在订单支付(显示订单提交成功那个界面)title信息还是订单确认,刷新之后才会是订单支付,是不是因为是子路由切换mounted函数只执行了一次造成的原因呢?还是我写的有问题?我看你最终的代码头部组件都直接在子路由上引入的,如果不按这种方式,可以怎么样呢?我这样写可以吗?

mounted(){
    let path=this.$route.path;
    if(path=='/order/confirm'){
      this.title='订单确认';
      this.tip='请认真填写收货地址';
    }else if(path=='/order/list'){
      this.title='订单列表';
      this.tip='请谨防钓鱼链接或诈骗电话,了解更多>';
    }else if(path=='/order/pay'){
      this.title='订单支付';
      this.tip='请谨防钓鱼链接或诈骗电话,了解更多>';
    }else{
      this.title='订单支付';
      this.tip='请谨防钓鱼链接或诈骗电话,了解更多>';
    }
  },
  watch:{
    $route(newRoute){
      if(newRoute.path=='/order/pay'){
        this.title='订单支付';
      this.tip='请谨防钓鱼链接或诈骗电话,了解更多>';
      }
    }
  },
写回答

1回答

河畔一角

2021-06-23

是的,后面我又改回去了,实际上要监听路由变化

0
3
拍拍你的头
回复
河畔一角
麻烦老师用电脑的时候帮忙看一下
2021-06-24
共3条回复

Vue全家桶实战 从零独立开发企业级电商系统

Vue全家桶构建企业级电商系统,真实服务端数据对接,高实用性

2560 学习 · 1307 问题

查看课程