当前位置: 首页 > news >正文

点击A组件跳转到B页面的tab的某一列

1、使用vuex存储点击的数据;
点击A组件里面的button按钮:

        <div><button @click="banli('first')">已办理</button><button @click="banli('second')">未办理</button><button @click="banli('third')">已完结</button></div>// banli  跳转到其他yemian
const banli=(value)=>{// 更新 Vuex 中的选中 value 状态console.log(value,'banli')// commit 触发的是 mutation,是同步的,直接修改 state。// store.commit('setTab',value)// dispatch 触发的是 action,action 可以是异步的,可以执行异步任务后再提交 mutation 来更新 state。store.dispatch('changeTab',value)router.push('/goods')
}

vuex中存储数据value,

import { createStore } from 'vuex';
export default createStore({// 存储数据state:{tab:'first'},// 修改state中的数据的唯一方式mutations:{setTab(state,tabValue){state.tab=tabValueconsole.log(tabValue,'newTab')  }},// 异步actions:{changeTab({commit},tabValue){commit('setTab',tabValue)  // 通过 action 提交 mutation}},
})

B组件中:

<div class="tabs"><el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick"><el-tab-pane label="User" name="first"><Users></Users></el-tab-pane><el-tab-pane label="Config" name="second">Config</el-tab-pane><el-tab-pane label="Role" name="third">Role</el-tab-pane></el-tabs>
</div>
import { ref, reactive, computed, watch, onMounted } from 'vue';
import {useStore } from 'vuex'
import  Users from '../../components/tabs/tabs_user.vue'
const activeName = ref('first')// 获取值tab
const tab=computed(()=>store.state.tab)
activeName.value=tab.value
console.log(activeName.value,'tab1')const handleClick = (tab) => {console.log('点击了tab2:', tab);};

2、使用本地储存localStorage;

// banli  跳转到其他yemian
const banli=(value)=>{
//   value:是你要存储的数据值。这个值可以是任何类型的数据,但 localStorage 只能存储字符串,因此如果要存储其它类型的数据(如对象、数组等),需要先将它们转换为字符串(通常通过 JSON.stringify())。localStorage.setItem('values', value); // 存储值console.log(value,'111')router.push('/goods')
}
const tabValue = localStorage.getItem('values'); //获取值
console.log(tabValue,'tabValue')
if (tabValue) {activeName.value = tabValue;}
http://www.lryc.cn/news/495277.html

相关文章:

  • HarmonyOS xml转换JavaScript 常用的几个方法
  • Linux笔记---进程:进程等待
  • 【Linux】匿名管道通信场景——进程池
  • 算法妙妙屋-------1.递归的深邃回响:全排列的奇妙组合
  • 【maven-6】Maven 生命周期相关命令演示
  • 黑马程序员Java笔记整理(day06)
  • LeetCode【代码随想录】刷题(动态规划篇)
  • 【看海的算法日记✨优选篇✨】第三回:二分之妙,寻径中道
  • 基于yolov8、yolov5的铝材缺陷检测识别系统(含UI界面、训练好的模型、Python代码、数据集)
  • 计算机光电成像理论基础
  • 【QNX+Android虚拟化方案】125 - 如何创建android-spare镜像
  • 深度学习基础小结_项目实战:手机价格预测
  • EMall实践DDD模拟电商系统总结
  • 【随笔】AI技术在电商中的应用
  • 序列式容器详细攻略(vector、list)C++
  • 快速启动项目
  • springboot347基于web的铁路订票管理系统(论文+源码)_kaic
  • 使用API管理Dynadot域名,在账户中添加域名服务器(Name Server)
  • 【Linux | 计网】TCP协议深度解析:从连接管理到流量控制与滑动窗口
  • go语言的成神之路-筑基篇-对文件的操作
  • 两道数据结构编程题
  • 【Qt】QDateTimeEdit控件实现清空(不保留默认时间/最小时间)
  • 12、字符串
  • DPDK用户态协议栈-Tcp Posix API 1
  • 【人工智能-科普】图神经网络(GNN):与传统神经网络的区别与优势
  • LabVIEW实现UDP通信
  • [pdf,epub]228页《分析模式》漫谈合集01-45提供下载
  • Kafka的消费消息是如何传递的?
  • 二分查找(Java实现)(1)
  • 力扣103.二叉树的锯齿形层序遍历