路由传参改变，由于组件复用，导致组件不刷新问题的解决

最新推荐文章于 2024-07-29 21:22:45 发布

大大益

最新推荐文章于 2024-07-29 21:22:45 发布

阅读量536

点赞数

本文链接：https://blog.csdn.net/qq_43695425/article/details/123896735

版权

Vue 组件复用路由监听数据刷新路由参数

关键词由CSDN通过智能技术生成

不同路由复用了同一组件

 {
        path: '/signStudent',
        name: 'signStudent',
        component: SignStudent,
        meta: {
          //needLogin:true,
          keepAlive: false // 不需要被缓存
        },
      }, {
        path: '/projectStudent',
        name: 'projectStudent',
        component: SignStudent,
        meta: {
          //needLogin:true,
          keepAlive: false // 不需要被缓存
        },
      }

但通过路由传参要给组件传递不同的参数时，组件并不会刷新，解决这个问题可以用watch监听路由的变化，让组件做出对应更改

  // 监听路由变化，刷新组件（由于复用组件不刷新）
  watch: {
    $route() {
      this.state = this.$route.query.state;
      //重新加载组件的数据
      this.init();
    }
  },

//methods中的方法
init() {
      //初始化total
      //根据根据老师id获取待审核报名学生的数量

      this.$http
        .get("http://localhost:8082/uplink/getSignStuNumByTea", {
          params: {
            tea_id: this.userinfo.userObj.tea_id,
            state: this.state
          }
        })
        .then(res => {
          //console.log(res.data);
          this.total = res.data;
        });
      //初始化第一页
      this.getProPage();
    }