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

相关文章

来自专栏dotnet core相关

Bootstrap-3-Typeahead

是Bootstrap-3-Typeahead,不是Twitter open source的typeahead,两者用法有差异。外加如果配合原生的Bootstra...

1116
来自专栏水击三千

radio与checkbox

最近一直在学习Javascript与asp.net MVC4,每天都在跟着书学习。这样总感觉自己看的很抽象,没有点实际的意义。而且,每次看的东西很容易忘记,所以...

2049
来自专栏python学习指南

Python爬虫(二十三)_selenium案例:动态模拟页面点击

本篇主要介绍使用selenium模拟点击下一页,更多内容请参考:Python学习指南 #-*- coding:utf-8 -*- import unit...

1876
来自专栏林德熙的博客

win10 uwp 如何在DataTemplate绑定方法

在 DataTemplate 绑定是使用次数很多的,下面我在使用新的控件 NavigationView 就需要绑定两个按钮。

511
来自专栏JetpropelledSnake

Django学习笔记之URL标签的使用

期初用django 开发应用的时候,完全是在urls.py 中硬编码配置地址,在views.py中HttpResponseRedirect()也是硬编码转向地址...

671
来自专栏FreeBuf

深入分析IE地址栏内容泄露漏洞

? 前言 在本文中,我们探讨的对象是IE浏览器,尽管该浏览器略显老态,但是其用户还是很多的,所以不容忽视。我最近对MSRC感到很欣喜,因为他们正在将工作重心移...

22410
来自专栏iOS Developer

详解持久化Core Data框架的原理以及使用---转自Bison的技术博客

975
来自专栏雪地二货笔记库

vue学习笔记9-监听属性-watch

这样就可以实现绑定 而且他后面也有很多功能,比如.lazy,惰性更新,只有焦点离开才会更新

371
来自专栏大魏分享(微信公众号:david-share)

实战:Bean的数据完整性验证方法| 从开发角度看应用架构11

Java应用程序将数据存储在Java对象中。这些Java对象通过网络,作为参数传递给方法,并存在于Java EE应用程序的不同层中。为了保持数据完整性,数据验证...

983
来自专栏北京马哥教育

Python 爬虫实战:股票数据定向爬虫

功能简介 目标: 获取上交所和深交所所有股票的名称和交易信息。 输出: 保存到文件中。 技术路线: requests—bs4–re 语言:python3.5 ...

35911

扫码关注云+社区