记录页面跳转传参不让地址出现传的参数，还要使页面刷新不丢失数据

一般来说，传参的方法也是有两种：query传参和params动态路由传参。

两者的区别：1.query传递显示参数，params传递不显示参数 2. query刷新页面数据不会丢失，params刷新页面会丢失数据。params相对于query来说较安全一点

---

现在，需求就是传参不让地址出现传的参数，还要使页面刷新不丢失数据。思路就是需要用到vuex,vuex不懂的，直接百度了解一下，现在废话多说，直接上

---

1. 跳转按钮那里this.$store.dispatch传参，地址上就不会出现传递的参数，我需要传递的参数就是goLabdetailData

 goDetails(index, row, id, title) {
      this.$store.dispatch('pageData/setlabdetaildata', JSON.stringify(row))
      this.$router.push({ name: 'labDetails', params: { userId: this.id || undefined})
    },

2.  现在就是去vuex里面去写

const state = {
  labDetails: window.sessionStorage.getItem('labDetails')
}
const mutations = { 
  SET_LABDETAILDATA: (state, value) => {
    state.labDetails = value
    window.sessionStorage.setItem('labDetails', value)
  }
}
const actions = { 
  setlabdetaildata({ commit }, value) {
    commit('SET_LABDETAILDATA', value)
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

3. 去getter页面写

const getters = { 
  labDetails: state => state.pageData.labDetails
}

export default getters

4. 页面引入mapGetters，

 import { mapGetters } from 'vuex'


  computed: {    ...mapGetters([
    'labDetails'
    ])
  },
  created() {

    console.log("getsesstion",JSON.parse(this.labDetails))

  },

这样就能拿到值啦，刷新也不会丢失

---

总结

例如：就是用了store状态，把这个值用sesstionstorage缓存起来，getter获取存入state,页面使用mapgetter方法映射到计算属性中去。