vue3+element?Plus使用el-tabs標(biāo)簽頁(yè)解決頁(yè)面刷新不回到默認(rèn)頁(yè)的問(wèn)題
更新時(shí)間：2023年07月28日 10:28:29 作者：歡喜~999
這篇文章主要介紹了vue3+element?Plus使用el-tabs標(biāo)簽頁(yè)頁(yè)面刷新不回到默認(rèn)頁(yè)的操作方法,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
vue3+element Plus使用el-tabs標(biāo)簽頁(yè)，頁(yè)面刷新不會(huì)到默認(rèn)頁(yè)
當(dāng)我們使用el-tabs標(biāo)簽頁(yè)，在頁(yè)面刷新后就會(huì)回到默認(rèn)的那一頁(yè)，如果我們想讓頁(yè)面停留在當(dāng)前頁(yè)，可以使用localStorage存儲(chǔ)當(dāng)前頁(yè)的值
1. 引入el-tabs
<el-tabs
v-model="activeName"
type="border-card"
class="demo-tabs"
@tab-click="handleClick"
>
<el-tab-pane label="我的列表" name="first">
內(nèi)容111
</el-tab-pane>
<el-tab-pane label="收藏列表" name="second">
內(nèi)容2222
</el-tab-pane>
</el-tabs>2. 在方法中設(shè)置localstorage
//tab 被選中時(shí)觸發(fā)的方法
const handleClick = (tab: any) => {
activeName.value = tab.props.name;
window.localStorage.setItem("activeTab ", activeName.value);
};
//頁(yè)面加載時(shí)先判斷有沒(méi)有l(wèi)ocalstorage，沒(méi)有的話取默認(rèn)值
onMounted(() => {
activeName.value = window.localStorage.getItem("activeTab ") || "first";
});3. 效果圖
vue3使用Element-plus Tabs 標(biāo)簽頁(yè)的點(diǎn)擊事件
<template>
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="用戶管理" name="first">用戶管理</el-tab-pane>
<el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
<el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
<el-tab-pane label="定時(shí)任務(wù)補(bǔ)償" name="fourth">定時(shí)任務(wù)補(bǔ)償</el-tab-pane>
</el-tabs>
</template><script>
export default {
data() {
return {
activeName: 'second'
};
},
methods: {
handleClick(tab, event) {
console.log(tab, event);
//這樣才能獲取每個(gè)el-tab-pane的name屬性
console.log(tab.props.name);
}
}
};
</script>注意：獲取name屬性需要tab.props.name
到此這篇關(guān)于vue3+element Plus使用el-tabs標(biāo)簽頁(yè)解決頁(yè)面刷新不回到默認(rèn)頁(yè)的問(wèn)題的文章就介紹到這了,更多相關(guān)vue3 element Plus頁(yè)面刷新內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue項(xiàng)目中0.js過(guò)大導(dǎo)致首屏加載慢的問(wèn)題解決方法
在 Vue 項(xiàng)目開(kāi)發(fā)完成后,進(jìn)行打包部署時(shí),首屏加載速度是影響用戶體驗(yàn)的關(guān)鍵因素之一,最近我在項(xiàng)目中就遇到了 0.js 過(guò)大導(dǎo)致首屏加載時(shí)間變慢的問(wèn)題,經(jīng)過(guò)一番排查和優(yōu)化,成功解決了該問(wèn)題,特此記錄分享給大家,需要的朋友可以參考下2025-11-11
vue中使用mixins/extends傳入?yún)?shù)的方式
這篇文章主要介紹了vue中使用mixins/extends傳入?yún)?shù)的方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要介紹了Vue EventBus自定義組件事件傳遞，組件化應(yīng)用構(gòu)建是Vue的特點(diǎn)之一，本文主要介紹EventBus進(jìn)行數(shù)據(jù)消息傳遞 ，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06
vue實(shí)現(xiàn)多組關(guān)鍵詞對(duì)應(yīng)高亮顯示功能
最近小編遇到這樣的問(wèn)題，多組關(guān)鍵詞，這里實(shí)現(xiàn)了關(guān)鍵詞的背景色與匹配值的字體顏色值相同，下面通過(guò)定義關(guān)鍵詞匹配改變字體顏色，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友參考下吧2019-07-07
vue的axios取消請(qǐng)求實(shí)現(xiàn)過(guò)程
文章介紹了如何使用axios的cancelToken功能取消請(qǐng)求,包括兩種創(chuàng)建cancelToken的方法：使用CancelToken.source工廠方法和通過(guò)傳遞executor函數(shù)創(chuàng)建,還提到了如何處理取消請(qǐng)求的原因,并給出了解決頻繁點(diǎn)擊發(fā)送請(qǐng)求問(wèn)題的建議2025-12-12
Vue項(xiàng)目使用PostCSS做h5頁(yè)面的屏幕適配的配置步驟
PostCSS 是一個(gè)用 JavaScript 編寫的工具,用于將 CSS 轉(zhuǎn)換為另一種 CSS,在做h5頁(yè)面的屏幕適配時(shí),結(jié)合 PostCSS 的一些插件能輕松實(shí)現(xiàn),下面以結(jié)合 postcss-pxtorem 插件為例,詳細(xì)介紹配置步驟,需要的朋友可以參考下2025-02-02
vue?鼠標(biāo)移入移出(hover)切換顯示圖片問(wèn)題
這篇文章主要介紹了vue?鼠標(biāo)移入移出(hover)切換顯示圖片問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)導(dǎo)航收縮框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
vue 重塑數(shù)組之修改數(shù)組指定index的值操作
這篇文章主要介紹了vue 重塑數(shù)組之修改數(shù)組指定index的值操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
這篇文章主要為大家詳細(xì)介紹了Vue3實(shí)現(xiàn)圖片放大鏡效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08