Vue跨页面传数据

  1. 有路由跳转的情况
    使用$router
	this.$router.push({
		name: “…”,
		params: {
			data: “…”
		}
	});
	// 在跳转后的页面使用数据
	this.xxx = this.$route.params.data.xxx;
  1. 没有路由跳转的情况
    利用会话缓存
	// 传
	sessionStorage.setItem("key", "value");
	// 用
	let data = sessionStorage.getItem("key");
  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以使用VueX来实现页面值。VueX是Vue.js中的状态管理模式,它可以在不同的组件之间共享同一个状态,包括数据、状态和方法等。这样,就可以实现页面值了。 具体实现步骤如下: 1. 创建一个VueX store 在Vue.js中,可以使用VueX来创建一个全局的store,用于存储应用的状态。 ```javascript import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ state: { cardInfo: {} // 存储卡片信息的对象 }, mutations: { // 定义一个方法用于更新卡片信息 setCardInfo(state, payload) { state.cardInfo = payload } } }) export default store ``` 2. 在需要值的组件中,将值存储到VueX store中 可以使用VueX中的mutations来更新store中的值,从而实现页面值。 ```javascript import store from '@/store' export default { methods: { // 点击按钮时,将卡片信息存储到VueX store中 handleClick() { const cardInfo = { /* 卡片信息 */ } store.commit('setCardInfo', cardInfo) } } } ``` 3. 在需要接收值的组件中,从VueX store中获取值 可以使用VueX中的getters来获取store中的值。 ```javascript import store from '@/store' export default { computed: { // 从VueX store中获取卡片信息 cardInfo() { return store.getters.cardInfo } } } ``` 这样,就可以实现页面值了。在需要值的组件中,将值存储到VueX store中;在需要接收值的组件中,从VueX store中获取值即可。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值