初学Vue,遇到了页面传值的问题,大概网上学习了解了一下,在此跟大家分享一下学习心得,欢迎批评指正。

一.参数传值

如果是简单的页面传值,比如传一个id到详情页等等,推荐使用参数传值。

这里页面是通过路由跳转的,所以参数传值有两种方法,也就是借助$router的两个参数【params】和【query】。

页面跳转的话,可以通过页面路由的名称name或路径path去定义目标页面。

定义一个v-on:click="turnToPost(item.id)” 方法,进行页面跳转和传值。

传值页面:

 <template>
<div>
<el-card class="post-card" v-for="item in postList" v-bind:key="item.id" v-on:click="turnToPost(item.id)">
…………
</el-card>
</div>
</template> <script> export default {
data() {
return {
postList: [
{
id: ,
title: "I’ll think of you every step of the way.",
time: "JANUARY 05, 2019",
content: "Time goes by so fast, people go in and out of your life. You must never miss the opportunity to tell these people how much they mean to you"
},…………
]
};
},
methods: {
turnToPost: function(id) {
//参数传值
this.$router.push({
name: "about",//页面
//path: '/blog/about',//name和path用其一就可以
params: { id: id, postList:JSON.stringify(this.postList) },
query: { id: id }
});
}
}
};
</script>

取值页面:

mounted:el挂载到实例上后调用,一般第一个业务逻辑会在这里开始。所以我们把取值放到mounted()函数中。

<template>
<div class="about">
<h1>about</h1>
</div>
</template>
<script>
export default {
data() {
return {};
},
mounted: function() {
this.$nextTick(function() {
let id = this.$route.params.id; //params
let posts = JSON.parse(this.$route.params.postList);
let id2 = this.$route.query.id; //query
console.log("$route", this.$route);
console.log("params", id);
console.log("query", id2);
console.log("posts", posts);
});
},
methods: {}
};
</script>

控制台输出的结果如下图:

二.缓存传值

通过localStorage和sessionStorage存储一个全局变量,在任何地方都可以取用。

传值页面:

 <template>
<div>
<el-card class="post-card" v-for="item in postList" v-bind:key="item.id" v-on:click="turnToPost(item.id)">
…………
</el-card>
</div>
</template> <script> export default {
data() {
return {
postList: [
{
id: ,
title: "I’ll think of you every step of the way.",
time: "JANUARY 05, 2019",
content: "Time goes by so fast, people go in and out of your life. You must never miss the opportunity to tell these people how much they mean to you"
},…………
]
};
},
methods: {
turnToPost: function(id) {
   //缓存传值
localStorage.setItem('id',id);
sessionStorage.setItem('id',id);
this.$router.push({
name: "about",//页面
//path: '/blog/about',//name和path用其一就可以
});
}
}
};
</script>

取值页面:

<template>
<div class="about">
<h1>about</h1>
</div>
</template>
<script>
export default {
data() {
return {};
},
mounted: function() {
this.$nextTick(function() {
let id3 = localStorage.getItem("id"); //localStorage
let id4 = sessionStorage.getItem("id"); //sessionStorage
console.log("localStorage", id3);
console.log("sessionStorage", id4);
});
},
methods: {}
};
</script>

控制台输出结果如下图:

Ps.

1.localStorage和sessionStorage的存储数据大小一般都是5MB,且存储在客户端,不需要持续的将数据发回服务器。

2.localStorage的生命周期是永久的,关闭页面或浏览器之后localStorage中的数据也不会消失。localStorage除非主动删除数据,否则数据永远不会消失。

sessionStorage的生命周期是仅在当前会话下有效。sessionStorage引入了一个“浏览器窗口”的概念,sessionStorage是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭,即使刷新页面或者进入同源另一个页面,数据依然存在。但是sessionStorage在关闭了浏览器窗口后就会被销毁。

手动移除localStorage和sessionStorage缓存方法:

//根据键删除缓存
localStorage.removeItem('id');
sessionStorage.removeItem('id');
//删除所有缓存数据
localStorage.clear();
sessionStorage.clear();

3.localStorage和sessionStorage只能存储字符串类型,对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理。

Ps.

this.$nextTick():将回调延迟到下次 DOM 更新循环之后执行。监测DOM更新完成,再请求数据,所以应该放到请求的回调函数里面。

三. 组件传值

子组件页面(About.vue):

在子组件中,props中定义想要从父页面传过来的值,此处定义了一个"msg",并显示在页面上。

<template>
<div class="about">
<h1>{{msg}}</h1>
</div>
</template>
<script>
export default {
name: 'about',
props: ['msg']
}
</script>

父页面(App.vue):

1.在父页面中引入about组件

import about from './views/About'
components: {
'about': about
}

2.在使用子组件的地方传值

<about :msg="parentMsg"></about>

把父页面的parentMsg赋值给子组件的msg,当parentMsg值变化时,msg也会发生变化。

<template>
<div>
<el-input v-model="parentMsg"></el-input>
<about :msg="parentMsg"></about>
</div>
</template> <script>
import about from './views/About' export default {
data () {
return {
parentMsg: 'test'
}
},
components: {
'about': about
}
}
</script>

演示图如下:

以上就是Vue页面传值的两种方法,欢迎补充指正!

/****************************我是可爱的分割线********************************/

Vue页面间传值,以及客户端数据存储的更多相关文章

  1. vue 页面间传值

    使用params传参 ,不能使用path 只能使用name 使用params传参,刷新参数会消失 router/index.js import Vue from 'vue' import Router ...

  2. ASP.NET页面间传值的几种方式

    ASP.NET页面间传值的几种方式 1.使用QueryString 使用QuerySting在页面间传递值已经是一种很老的机制了,这种方法的主要优点是实现起来非常简单,然而它的缺点是传递的值是会显示在 ...

  3. iOS页面间传值的方式(NSUserDefault/Delegate/NSNotification/Block/单例)

    iOS页面间传值的方式(NSUserDefault/Delegate/NSNotification/Block/单例) 实现了以下iOS页面间传值:1.委托delegate方式:2.通知notific ...

  4. 【转】iOS页面间传值的方式(Delegate/NSNotification/Block/NSUserDefault/单例)-- 不错

    原文网址:http://www.cnblogs.com/JuneWang/p/3850859.html iOS页面间传值的方式(NSUserDefault/Delegate/NSNotificatio ...

  5. iOS页面间传值的方式 (Delegate/NSNotification/Block/NSUserDefault/单例)

    iOS页面间传值的方式(Delegate/NSNotification/Block/NSUserDefault/单例)   iOS页面间传值的方式(NSUserDefault/Delegate/NSN ...

  6. iOS页面间传值的五种方式总结(Delegate/NSNotification/Block/NSUserDefault/单例)

    iOS页面间传值的方式(Delegate/NSNotification/Block/NSUserDefault/单例) iOS页面间传值的方式(NSUserDefault/Delegate/NSNot ...

  7. mui框架如何实现页面间传值

    mui框架如何实现页面间传值 我的传值 listDetail = '<li class="mui-table-view-cell mui-media>">< ...

  8. Vue 组件间传值

    前言 Vue 作为现在比较火的框架之一,相信您在使用的过程中,也会遇到组件间传值的情况,本文将讲解几种 Vue 组件间传值的几种方法,跟着小编一起来学习一下吧! 实现 注意: 学习本文,需要您对 Vu ...

  9. JAVASCRIPT实现的WEB页面跳转以及页面间传值方法

    在WEB页面中,我们实现页面跳转的方法通常是用LINK,BUTTON LINK ,IMG LINK等等,由用户点击某处,然后直接由浏览器帮我们跳转. 但有时候,需要当某事件触发时,我们先做一些操作,然 ...

随机推荐

  1. Unity中确定时间是否在一定范围内

    NowTime = DateTime.Now.ToLocalTime(); Timeyear = DateTime.Now.ToLocalTime().ToString("yyyy-MM-d ...

  2. 移动端rem布局 js

    // rem布局适配 (function(doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in ...

  3. Burnside引理和polay计数 poj2409 Let it Bead

    题目描述 "Let it Bead" company is located upstairs at 700 Cannery Row in Monterey, CA. As you ...

  4. LDAP个人理解

    在新的公司办公,所有的后台系统或文档系统都公用一个LDAP账号. 接触到这个新名词,就查了一下,谈谈个人理解: LDAP是个协议, 简单地说,可以把LDAP服务理解为一套存放你账户密码的数据库系统.市 ...

  5. Going Home HDU - 1533(最大费用最小流)

    On a grid map there are n little men and n houses. In each unit time, every little man can move one ...

  6. 【模板】Hash

    洛谷3370 这题煞笔的吧QAQ......排序去重或者Map都可以 #include<cstdio> #include<map> #include<string> ...

  7. Thinkphp5跨域问题

    关于代码分离可能会遇到json传输接收不到的问题(可能00) 起初我百度到解决此问题可以用jsonp来发送并接受,可是这只是一时之计 以后也会不方便所以我发现了一下方法 在app顶层创建文件commo ...

  8. rpm包下载地址

    https://dl.fedoraproject.org/pub/epel/6/x86_64/

  9. GlobalSign 增强型(EV) SSL 证书

    GlobalSign 增强型(EV) SSL 证书,属于最高验证级别的EV SSL,验证域名所有权,进行严格的企业真实身份验证,证书标识企业组织机构名称,强化信任度,浏览器地址栏变绿色.提供40位/5 ...

  10. [luoguP2024] 食物链(并查集)

    传送门 经典的并查集问题 对于这种问题,并查集需要分类 开3*n的并查集,其中x用来连接与x同类的,x+n用来连接x吃的,x+2*n用来连接x被吃的. 1 x y时,如果 x吃y 或 x被y吃,那么为 ...