vue路由跳转组件复用,使用$route监听路由和使用beforeRouteUpdate的问题

image.png

左侧为路由跳转,前两个复用一个组件,第三个为单独一个组件

使用beforeRouteUpdate会造成在 '行政区划' 中选择一个筛选项后切换到 '1' 中,再回到 '行政区划' ,之前的筛选项依旧存在的问题,,但是我做了清空筛选项的一些操作,并且确实清掉了,接口返回的列表也都是全部数据,但是视图不更新

beforeRouteUpdate(to, from, next) {
    console.log('---复用了---', this.bool)
    const { params: { bsId, bsName } } = to
    this.bsId = bsId
    this.bsName = bsName
    this.$refs['filter'].resetFilter()
    this.removeFilter()     // 重置筛选项
    this.getList()  // 重新获取列表数据,返回结构为所有数据
    next()
},

组件复用时通过监听路由来实现复用组件的数据刷新,但是造成会执行多次的问题,,复用多少次,$route就会执行多少次,有好的解决方案吗

阅读 3k
2 个回答

左边为啥要复用组件,用遍历生成不行吗

推荐问题