点击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}},getters: {getTab: state => state.tab // 获取当前 tab 值}
})

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 应该由 v-model 管理，而不是手动赋值
//  activeName.value=tab.value// 监听 tab 的变化并更新 activeName
//  默认情况下，watch 只会在目标数据发生变化时才触发回调函数。但是，在某些情况下，你希望在监听的目标数据首次设置时，watch 回调函数就被执行一次，这时就需要使用 immediate: true 选项。
// 没有 immediate：true； watch 默认只会在被监听的数据发生变化后执行回调。
// 加上 immediate: true： 让 watch 在组件挂载时立即执行回调，用来处理初始化数据或同步初始状态 。 如同步状态、加载数据watch(tab, (newVal) => {if (newVal !== activeName.value) {activeName.value = newVal;  // 当 tab 发生变化时更新 activeNameconsole.log('tab changed to:', newVal);  }},{immediate:true,deep:true});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;}