vue保存页面的值_Vue页面间传值，客户端数据存储，以及父子组件间props传值

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

一.参数传值

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

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

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

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

传值页面：

…………

data() {return{

postList: [

{

id:1,

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 }

});

}

}

};

取值页面：

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

about

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: {}

};

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

二.缓存传值

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

传值页面：

…………

data() {return{

postList: [

{

id:1,

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用其一就可以

});

}

}

};

取值页面：

about

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: {}

};

控制台输出结果如下图：

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"，并显示在页面上。

{{msg}}

name:'about',

props: ['msg']

}

父页面(App.vue)：

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

import about from './views/About'

components: {

'about': about

}

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

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

data () {return{

parentMsg:'test'}

},

components: {'about': about

}

}

演示图如下：

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

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