收藏:
https://blog.csdn.net/Wave_explosion/article/details/121999104
数组遍历:
https://blog.csdn.net/Wave_explosion/article/details/121854910
拖拽:
https://blog.csdn.net/Wave_explosion/article/details/121921522
**
vue 传参刷新页面 数据丢失
**
传参方式 (三种):
1.通过路由params传参
2.通过路由query传参
3.通过vuex
1.params传参:
在路由path中哪个组件需要传递参数,定义参数,用于组件传递,params刷新页面数据会丢失。
path: "/chatTableDate/:user"
//USER为参数
组件中,通过点击传递参数,targetUser传的参数:
需要用的组件接受,通过beforeRouteEnter进入路由之前执行函数:
2.query传值
query会把传递的参数显示在url地址中,刷新不会消失:
各种传,随便传
exDirect(query) {
this.$router.push({
path: "/direct/direct?type=r",
query,
});
},
图贴这:
第二步:
路由配置守卫一下:
beforeEnter(to, from, next) {
let {
type
} = to.query || {};
to.meta.title = `${curdType[type]}目录`;
next();
},
图:
最后拿来用(this.$route.query):
const NumberReg = /^\d{1,}$/;
const fData = this.$route.query;
if (this.$route.query.type === "r") {
return (this.tableObj = Object.assign({}, fData));
图:
3.vuex
规则,流程:
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
let store = new Vuex.Store({
// 1. state
state:{
run:"魏童 13409111138"
},
// 2. getters
getters:{
// 参数列表state指的是state数据
getCityFn(state){
return state.run;
}
},
// 3. actions
// 异步
actions:{
// 参数列表:{commit, state}
// state是state数据
// commit调用mutations的方法
// name是调用方法时传的参数
setRun({commit,state}, name){
// 跟后台api
// 调用mutaions里面的方法
commit("setRun", name);
}
},
// 4. mutations
mutations:{
// state指的是state的数据
// name传递过来的数据
setRun(state, name){
state.run = name;//将传参设置给state的run
}
}
});
export default store;
import store from './store/store.js';
组件methods中dispatch:
事件:
<ul>
<li v-for="(item,index) in runArr" @click="backFn(index)">
<h2>{{item}}</h2>
</li>
</ul>
方法:
methods:{
backFn : function(index){
// 调用vuex的ations设置值
this.$store.dispatch("setRun", this.runArr[index]);
//回到首页
this.$router.push("/");
}
}
取值存值:
if (sessionStorage.getItem("store")) {
this.$store.replaceState(
Object.assign(
{},
this.$store.state,
JSON.parse(sessionStorage.getItem("store"))
)
);
sessionStorage.removeItem("store")
}
//页面刷新时vuex信息保存到sessionStorage
window.addEventListener("beforeunload", () => {
sessionStorage.setItem("store", JSON.stringify(this.$store.state));
});
存了就丢不聊啦
good good 学习 up up everyday!
收藏:
https://blog.csdn.net/Wave_explosion/article/details/121999104