1.params,跟query都可以实现,但是query将参数暴露在url不安全,params则是用户手动刷新页面后数据丢失
2.params实现手动刷新不丢失数据的常用方法在路由的path后面加上传的params参数,
例如:/system/divisionManage/clientDatum/:divisionId
上诉方法会在url后面有/system/divisionManage/clientDatum/1039这样子的参数展示出来,也不安全
3.只能用params+vuex存进状态值来解决
例如:import {COMMIT_INTERFACE}from "@/store"
modules文件里面
// 系统管理
import {COMMIT_INTERFACE}from "@/store"
interface STATE {
//部门管理---商品列表,关联医院,关联渠道商用
divisionId:number;
divisionItem:any;
}
const state:STATE = {
divisionId:0,
divisionItem:null,
}
const mutations = {
SET_DIVISION_ID: (state:STATE, divisionId:number) => {
state.divisionId = divisionId
},
SET_DIVISION_ITEM: (state:STATE, divisionItem:number) => {
state.divisionItem = divisionItem
},
}
const actions = {
setDivisionId: ({commit}:COMMIT_INTERFACE, divisionId:number) => {
commit('SET_DIVISION_ID', divisionId)
},
setDivisionItem: ({commit}:COMMIT_INTERFACE, divisionItem:any) => {
commit('SET_DIVISION_ITEM', divisionItem)
},
}
export default {
namespaced:true,
state,
mutations,
actions
}
getters文件里面
const getters = {
// 系统管理
system: (state:any) => state.app.system,
}
export default getters;
调用
this.setDivisionId(sItem.id);存
this.$store.state.system.divisionId;取------可以在计算属性computed取
例如
//部门或机构的id
divisionId(){
// console.log(this.$route.params.divisionId);
// return this.$route.params.divisionId;
console.log(this.$store.state.system.divisionId);
return this.$store.state.system.divisionId;
}