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 条评论
登录 后参与评论

相关文章

来自专栏君赏技术博客

百思不得姐数据挖掘第一篇

这是此文档的第一篇文章,写在之前要说的话。里面设计的技术点可能有些新人不是太了解,我只会说我遇到的难点和思路,文章也是想到那里写到那里。

7130
来自专栏刘望舒

Android解析WindowManager(二)Window的属性

前言 在上一篇文章我们学习了WindowManager体系,了解了Window和WindowManager之间的关系,这一篇我们接着来学习Window的属性。 ...

24580
来自专栏QQ音乐技术团队的专栏

使用 Jest 进行前端单元测试

目前 Jest 已经在 Facebook 开源的 React, React Native 等前端项目中被做为标配测试框架。下面简单介绍一些 Jest 比较有用的...

1K90
来自专栏Petrichor的专栏

nano:基本操作

24940
来自专栏不知的专栏

反-反爬虫:用几行代码写出和人类一样的动态爬虫

本文将从 Phantomjs 动态爬虫介绍起,用3行代码傻瓜式完成基于 Casper 的动态爬虫来绕过对抗策略获取页面数据。

1.3K20
来自专栏james大数据架构

View与Control间的数据交互

View与Control间的数据交互  1.ViewBag.Name ="Name1"  2.ViewData["VD"] = "view data";  3....

20490
来自专栏葡萄城控件技术团队

MVC5:使用Ajax和HTML5实现文件上传功能

引言 在实际编程中,经常遇到实现文件上传并显示上传进度的功能,基于此目的,本文就为大家介绍不使用flash 或任何上传文件的插件来实现带有进度显示的文件上传功能...

646100
来自专栏移动开发之家

Flutter完整开发实战详解(三、 打包与填坑篇)

作为系列文章的第三篇,继篇章一和篇章二之后,本篇将为你着重展示:Flutter开发过程的打包流程、APP包对比、细节技巧与问题处理。本篇主要描述的Flutter...

62530
来自专栏葡萄城控件技术团队

MultiRow发现之旅(四)- 使用MultiRow开发WinForm应用(附源码)

前文回顾 MultiRow发现之旅(一)- 高效模板设计器 MultiRow发现之旅(二)- 详解属性管理器 MultiRow发现之旅(三)- 模板管理器和Ta...

248100

Android 转 Windows Phone 8:SQL 数据库的操作

在接下来的几篇文章中,您将了解如何使用 Windows Phone 8 平台上的本地数据,并将其与

18380

扫码关注云+社区

领取腾讯云代金券