vue保存页面的值_vue前端页面跳转参数传递及存储

本文详细介绍了在Vue中如何进行页面跳转并传递参数,包括通过路由params、Vuex状态管理和localStorage本地存储。讨论了各自的优缺点,如路由传递的简单性但参数易丢失,Vuex的灵活性但刷新后数据不持久,以及localStorage的持久化存储特性。同时,展示了如何在Vue项目中实现页面跳转、样式管理以及在刷新后仍能获取先前的参数。
摘要由CSDN通过智能技术生成

不同页面间进行参数传递,实现方式有很多种,最简单最直接的方式就是在页面跳转时通过路由传递参数,如下所示。

路由传递参数

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',

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值