zoukankan      html  css  js  c++  java
  • vue从详情页回到列表页,停留在之前的tab上

    一、pc端

      pc端一般返回时有返回按钮,这种情况下,在跳转到详情页时通过query或params将当前tab的name或下标传过去,在返回时再通过query或params传回来

      data() {
        return {
          tabActiveName: 'first'
        }
      },
      created() {
        // 当前显示的tab由返回按钮传来的值决定
        if (this.$route.params.tabActiveName) {
          this.tabActiveName = this.$route.params.tabActiveName
        }
      }

    二、移动端

      移动端一般返回时没有返回按钮,此时无法通过pc的那种方式。可以通过vuex将当前的tab状态保存,在回到列表页时获取到vuex中的name或下标

    import { mapState, mapMutations } from 'vuex'

      需要注意当前组件中使用的 activeTab 和vuex中的 projectBoostTabsIndex 必须是两个不同的变量名

      data() {
        return {
          activeTab: 0
        }
      },
      created() {
        ddNavSetTitle('项目推进')
        const { projectBoostTabsIndex } = this
        this.activeTab = projectBoostTabsIndex
      },
      watch: {
        activeTab(newVal) {
          this.setProjectBoostTabsIndex(newVal) // 如果不用辅助函数就直接使用commit触发 this.$store.commit('setProjectBoostTabsIndex', newVal)
        }
      },
      methods: {
        ...mapMutations({
          setProjectBoostTabsIndex: 'setProjectBoostTabsIndex'
        })
      },
      computed: {
        ...mapState({
          projectBoostTabsIndex: state => state.projectBoost.projectBoostTabsIndex
        })
      }

    store/projectBoost.js:

    const projectBoost = {
      state: {
        projectBoostTabsIndex: 0
      },
      mutations: {
        setProjectBoostTabsIndex(state, value) {
          state.projectBoostTabsIndex = value
        }
      }
    }
    
    export default projectBoost

    store/index.js:

    import projectBoost from './modules/projectBoost'
    
      modules: {
        projectBoost
      }
  • 相关阅读:
    转载 线程池 异步I/O线程 <第三篇>
    转载 线程初步了解
    gdal库中设置prj4库全路径的用法
    比较ArrayList、LinkedList、Vector
    JavaScript创建日志文件并记录时间的做法
    从length与length()开始谈Java
    Java异常处理示例
    hudson添加批处理编译命令的注意事项
    使用相对路径导入ado库的方法
    如何将字段中带逗号的SQLite数据库数据导入到MySQL
  • 原文地址:https://www.cnblogs.com/wuqilang/p/14850281.html
Copyright © 2011-2022 走看看