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
      }
  • 相关阅读:
    dup和dup2
    cassandra nodetools
    python 之mechanize
    IDEA使用GsonFormat
    游标应用
    SQL 2005 with(nolock)详解
    SET NOCOUNT ON
    异常处理机制(Begin try Begin Catch)
    FILLFACTOR 作用 sql
    触发器语法
  • 原文地址:https://www.cnblogs.com/wuqilang/p/14850281.html
Copyright © 2011-2022 走看看