【页面不丢失】 三传参 随便传

收藏：

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