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)有的話(huà)取默認(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="用戶(hù)管理" name="first">用戶(hù)管理</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)文章
解決el-select數(shù)據(jù)量過(guò)大的3種方案
最近做完一個(gè)小的后臺(tái)管理系統(tǒng),快上線了,發(fā)現(xiàn)一個(gè)問(wèn)題,有2個(gè)select的選項(xiàng)框線上的數(shù)據(jù)量是1w+,而測(cè)試環(huán)境都是幾百的,所以導(dǎo)致頁(yè)面直接卡住了,本文給大家總結(jié)了3種方法,需要的朋友可以參考下2023-09-09
如何通過(guò)Vue實(shí)現(xiàn)@人的功能
這篇文章主要介紹了如何通過(guò)vue實(shí)現(xiàn)微博中常見(jiàn)的@人的功能，同時(shí)增加鼠標(biāo)點(diǎn)擊事件和一些頁(yè)面小優(yōu)化。感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2021-12-12
vue+el-table實(shí)現(xiàn)合并單元格
這篇文章主要為大家詳細(xì)介紹了vue+el-table實(shí)現(xiàn)合并單元格，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
vue實(shí)現(xiàn)element上傳多張圖片瀏覽刪除功能
這篇文章主要介紹了vue實(shí)現(xiàn)element上傳多張圖片瀏覽刪除功能,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-10-10
這篇文章主要介紹了element-ui中使用upload組件獲取上傳文件信息方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
vue實(shí)現(xiàn)類(lèi)似淘寶商品評(píng)價(jià)頁(yè)面星級(jí)評(píng)價(jià)及上傳多張圖片功能
最近在寫(xiě)一個(gè)關(guān)于vue的商城項(xiàng)目，然后集成在移動(dòng)端中，開(kāi)發(fā)需求中有一界面，類(lèi)似淘寶商城評(píng)價(jià)界面！接下來(lái)通過(guò)本文給大家分享vue實(shí)現(xiàn)類(lèi)似淘寶商品評(píng)價(jià)頁(yè)面星級(jí)評(píng)價(jià)及上傳多張圖片功能，需要的朋友參考下吧2018-10-10
vue父組件點(diǎn)擊觸發(fā)子組件事件的實(shí)例講解
下面小編就為大家分享一篇vue父組件點(diǎn)擊觸發(fā)子組件事件的實(shí)例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
Elemenu中el-table中使用el-popover選中關(guān)閉無(wú)效解決辦法(最新推薦)
這篇文章主要介紹了Elemenu中el-table中使用el-popover選中關(guān)閉無(wú)效解決辦法(最新推薦),因?yàn)樵趀l-table-column里,因?yàn)槭嵌嘈?使用trigger="manual"?時(shí),用v-model="visible"來(lái)控制時(shí),控件找不到這個(gè)值,才換成trigger="click",需要的朋友可以參考下2024-03-03
vue 設(shè)置proxyTable參數(shù)進(jìn)行代理跨域
這篇文章主要介紹了vue 設(shè)置proxyTable參數(shù)進(jìn)行代理跨域的相關(guān)資料，及代理跨域的概念原理,需要的朋友可以參考下2018-04-04
這篇文章主要介紹了vue運(yùn)行卡死的問(wèn)題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01