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

收藏：

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. statestate:{run:"魏童  13409111138"},// 2. gettersgetters:{// 参数列表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. mutationsmutations:{// 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信息保存到sessionStoragewindow.addEventListener("beforeunload", () => {sessionStorage.setItem("store", JSON.stringify(this.$store.state));});

存了就丢不聊啦

good good 学习 up up everyday！

收藏：

https://blog.csdn.net/Wave_explosion/article/details/121999104

【页面不丢失】三传参随便传相关推荐

vue动态路由传参---query传参和params传参
当一个页面跳转到另一个页面时,组件结构相同,只是内容不同且地址栏后缀不同 ,这个地址栏的后缀就是参数,根据不同参数渲染不同的内容,这个跳转就叫路由传参. 当项目中组件间通过路由跳转,有时,我们需要传递 ...
C++ 传参时传内置类型时用传值(pass by value)方式效率较高
来源:唐磊的个人博客<C++ 传参时传内置类型时用传值(pass by value)方式效率较高> 在<Effective C++>里提到对内置(C-like)类型在函数传参时 ...
Vue路由传参及传参后刷新导致参数消失处理
参考:https://blog.csdn.net/qq_43103581/article/details/82260073(vue 路由传递参数,刷新页面后参数丢失) 项目功能需要,要从列表页跳转到第 ...
黑马ajax学习笔记02--art-template模板，自动提示，防抖，三级联动，fromData传参及传文件，同源，jsonp，天气预报，CROS，服务器桥接，withCredential跨域登录
1.模板引擎概述作用:使用模板引擎提供的模板语法,可以将数据和HTML拼接起来实际上是实现在客户端做数据拼接 art-template模板引擎官网:http://aui.github.io/ar ...
尚硅谷VUE项目-前端项目问题总结07--产品详情页【vuex-排他操作foreach-放大镜-轮播图-兄弟组件通信$bus-购物车-路由跳转传参-路由传参+会话存储】-游客身份-节流
尚硅谷VUE项目-前端项目问题总结07---产品详情页 1.静态组件(详情页还未注册为路由组件) 2.发请求 3.vuex-获取产品详情信息 3.1放大镜 3.2 属性值[排他操作] 3.3轮播图[j ...
delphi中的函数传参如何传枚举参数_shell脚本的函数介绍使用和工作常用案例。建议收藏...
#前言:今天我们来聊聊shell脚本中的函数知识,看一下函数的优势,执行过程和相关的使用案例. #简介 1.函数也具有别名类似的功能 2.函数是把程序里多次调用相同的代码部分定义成一份,然后给这份代码 ...
delete postman 传参_PostMan 传参boolean 类型，接口接受的值一直是false
情形: 最近写前台页面的一个按钮,功能是:点击后切换状态,显示是或否. 字段名称是isTest,类型是boolean . 写完接口,拿postMan测试,传参如下: 但是后台接口接受的数据一直是fa ...
vue路由传参 params传参不能传对象
不能传对象,传对象的时候,刷新完数据会丢失传递的是一个对象但是: 跳转以后,刷新页面,数据会丢失,所以说不能传对象,会有问题
axios get传参_axios 传数组或对象格式的参数用GET和POST的区别
踩过坑必须记录一下,下次才能再踩一次! 1.前端传对象数组格式参数给后台接口,后台定义请求方式为GET,但是每次传参都返回参数格式不正确,参数打印出来格式就是后端需要的数组对象,但是看控制台的请求参数 ...

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

vue 传参刷新页面数据丢失

【页面不丢失】三传参随便传相关推荐

最新文章

热门文章

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

vue 传参刷新页面 数据丢失

【页面不丢失】 三传参 随便传相关推荐

最新文章

热门文章

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

vue 传参刷新页面数据丢失

【页面不丢失】三传参随便传相关推荐