vue保存页面的值_vue前端页面跳转参数传递及存储

不同页面间进行参数传递，实现方式有很多种，最简单最直接的方式就是在页面跳转时通过路由传递参数，如下所示。

路由传递参数

this.$router.push({

name: '跳入页面',

params: {

pid: pid,

}

})

实现方式如上所示，利用router.push方法可以从当前页面跳入指定的页面，跳入的页面通过name属性来确定。name属性里面的内容是在路由routes中定义的。如下所示：

const routes = [{

path: '/login',

component: Login,

name: '跳入页面'

}]

参数通过params属性来传递，如上例中传递了一个pid的参数给页面Login。

路由传递参数好处是简单方便、不占用系统内存。但有个缺点是无法保存传递过来的参数，当刷新页面后，参数遗失。

vuex传递数据

vuex是一个专为Vue.js应用程序开发的状态管理模式，采用集中式存储管理应用的所有组件的状态。在使用vuex之前需要安装，index.js引入vuex代码如下：

import Vue from 'vue'

import Vuex from 'vuex'

import store from './vuex/store'

Vue.use(Vuex)

new Vue({

el: '#app',

router,

store,

template: '',

components: { App },

})

其中import store from './vuex/store'是引入store.vue文件，里面配置的是vuex存储信息，如下所示：

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({

state: {

reportId: null,

reportType: null

},

mutations: {

SET_ReportId (state, rid) {

state.reportId = rid;

},

SET_ReportType (state, type) {

state.reportType = type;

}

}

})

export default store

其中，state中reportId、reportType是要传递的参数；mutations中定义的传入参数时的方法。store.vue相当于是一个容器，定义了元素、存储元素的方法。那么如何使用呢？如何调用存储方法呢？调用方法如下：

this.$store.commit('SET_ReportId', "10010");

使用方法如下：

this.rid = this.$store.state.reportId;

使用vuex的好处是不一定非得向跳入页面传递参数，也可向上级页面传递参数或者跨组件传递参数。但缺点是当刷新页面时，无法继续加载传递的参数。

在刷新页面时，路由和vuex都不能保存提取参数。如果想要在刷新页面时仍然提取之前的参数，到底有没有办法实现呢？答案是有，这是我们可以通过localStorage实现。

localStorage传递参数

localStorage是将参数存储在本地，当刷新页面时，从本地提取参数。localStorage传递参数比较简单，参数存储方式如下：

window.localStorage.setItem('reportId', rid);

参数提取方法如下：

this.rid = window.localStorage.getItem('reportId');

vue 实现页面跳转

首先,vue项目文件夹如下: components下有两个.vue文件,HelloWorld为创建时自动建立的,login需要自己创建的,login页面效果如下: 首先实现登录按钮的跳转,先对inde ...

Vue项目页面跳转时候的，浏览器窗口上方的进度条显示

1.安装: cnpm install --save nprogress 2.在main.js中引入: import NProgress from 'nprogress' import 'nprogre ...

vue实现页面跳转(简易版)

1.用点击函数 跳转页面 函数 ...

vue中页面跳转拦截器的实现方法

首先对index.js的router进行配置; export default new Router({ routes: [ { path: '/consultancy', name: 'consult ...

【完美解决】vue，页面跳转样式错位但是刷新又好了的情况

在vue文件中,做样式分离: 将覆盖样式单独写在一个style标签内,原页面写在 scoped样式作用域下.

VUE，页面跳转传多个参数

Next

Thinkphp5 表单提交额外参数和页面跳转参数传递url

1. 表单提交

随机推荐

Ubuntu/Mint更换阿里云源

sudo cp /etc/apt/sources.list /etc/apt/sources.list.bak #备份 sudo vim /etc/apt/sources.list #修改 sudo ...

20145330第九周《Java学习笔记》

20145330第九周 第十六章 整合数据库 JDBC入门 数据库本身是个独立运行的应用程序 撰写应用程序是利用通信协议对数据库进行指令交换,以进行数据的增删查找 JD ...

Libgdx 开发指南(1.3) 应用框架——查询、日志

查询 Application接口提过多种方法查询运行时环境属性. 获得应用类型 有时候根据运行平台需要处理一些具体的逻辑,可以使用 Application.getType() 方法来返回应用所运行的平 ...

创建论坛Discuz

下载discuz! mkdir /data/wwwcd /data/wwwwget  http://download.comsenz.com/DiscuzX/3.2/Discuz_X3.2_SC_GB ...

HttpWebRequest和HttpWebResponse用法小结

http://www.cnblogs.com/willpan/archive/2011/09/26/2176475.html http://www.cnblogs.com/lip0121/p/4539 ...

JVM垃圾收集算法——分代收集算法

分代收集算法(Generational Collection): 当前商业虚拟机的垃圾收集都采用"分代收集算法". 这种算法并没有什么新的思想,只是根据对象存活周期的不同将内存划分 ...

手动编译protobuf3的C++源码

Windows下编译 官方文档 第三方文档 准备工具 Visual Studio 2013 CMake https://cmake.org/ Git https://git-scm.com/ 需要注意 ...

git连接不上远程仓库---visualstudio提交代码报错：no upstream configured for branch 'master'

1,新建文件夹,在文件下下鼠标右键git bush--->git init,初始化仓库: 2,设置gitthub仓库地址:git remote add origin https://github ...

TCP/IP协议--TCP的超时和重传

TCP是可靠传输.可靠之一体现在收到数据后,返回去一个确认.但是不能完全避免的是,数据和确认都可能丢失.解决这个办法就是,提供一个发送的重传定时器:如果定时器溢出时还没收到确认,它就重传这个报文段. ...

Hbuilder Webview调试+逍遥安卓模拟器

软件版本: HBuilder : 9.0.2.201803061935 逍遥安卓:5.2.2 webview相当于一个浏览器的tab,通过在webview中修改,模拟器端会实时刷新效果.从而达到调试手 ...