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