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: '<App/>',
  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');

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏LanceToBigData

XML(一)XML大揭秘

前言 每天都要学习很多新的知识,比你厉害的程序员比你还努力,那你混的下这口饭吗?所以不抱怨,坚持!接下来给大家分享的是xml。可能很多做开发的都遇到过xml, ...

1859
来自专栏友弟技术工作室

golang爬虫初体验

最近在学习golang,看网上很多人都喜欢爬豆瓣,今天我就写了一个golang版的爬虫。对于python爬虫,我很了解,什么dom树,js异步,爬虫技术栈都是没...

1104
来自专栏菩提树下的杨过

MVC RC2中关于HtmlHelper给DropDownList设置初始选中值的问题

Asp.Net MVC RC2中Helper提供的DropDownList好象并不太好用,特别想给下拉框设置初始选中值的时候(可能我还没找到正确的方法) 小试了...

1675
来自专栏idba

获取没有设置TTL的key

在运维Redis的时候,总会遇到使用不规范的业务设计,比如没有对key设置ttl,进而导致内存空间吃紧,通常的解决方法是在slave上dump 出来所有的k...

742
来自专栏小灰灰

SPI框架实现之旅二:整体设计

SPI框架实现之旅二:整体设计 上一篇简单的说了一下spi相关的东西, 接下来我们准备开动,本篇博文主要集中在一些术语,使用规范的约定和使用方式 设计思路 下...

2318
来自专栏xingoo, 一个梦想做发明家的程序员

【AngularJS】—— 11 指令的交互

前面基本了解了指令的相关内容:   1 如何自定义指令   2 指令的复用 本篇看一下指令之间如何交互。学习内容来自《慕课网 指令3》 背景介绍 ...

1849
来自专栏开源优测

BeautifulSoup的使用

参考资料地址:https://www.crummy.com/software/BeautifulSoup/bs4/doc.zh/#id28

1031
来自专栏软件开发

前端MVC学习总结(二)——AngularJS验证、过滤器、指令

一、验证 angularJS中提供了许多的验证指令,可以轻松的实现验证,只需要在表单元素上添加相应的ng属性,常见的如下所示: <input Type="tex...

2166
来自专栏达摩兵的技术空间

js面试题系列003

1、创建一个空对象,并且 this 变量引用该对象,同时还继承了该函数的原型。 2、属性和方法被加入到 this 引用的对象中。 3、新创建的对象由 thi...

513
来自专栏MasiMaro 的技术博文

PE文件详解(八)

本文转载自小甲鱼PE文件详解系列教程原文传送门 当应用程序需要调用DLL中的函数时,会由系统将DLL中的函数映射到程序的虚拟内存中,dll中本身没有自己的栈...

722

扫码关注云+社区