一般来说,传参的方法也是有两种:query传参和params动态路由传参。
两者的区别:1.query传递显示参数,params传递不显示参数 2. query刷新页面数据不会丢失,params刷新页面会丢失数据。params相对于query来说较安全一点
现在,需求就是传参不让地址出现传的参数,还要使页面刷新不丢失数据。思路就是需要用到vuex,vuex不懂的,直接百度了解一下,现在废话多说,直接上
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方法映射到计算属性中去。