### 如何在
Element-UI 中
实现标签页刷新后保持当前选中状态
为了
实现在 `
element-ui` 的 `el
-tabs` 组件中，当用户刷新
页面时能够自动返回到之前选中的
标签页，可以采用以下方案：
#### 方法概述
通过将用户的操作记录存储至
浏览器本地（如 `localStorage` 或 URL 参数），并在
页面加载
时读取这些数据来恢复之前的选中状态。
---
#### 解决思路与具体
实现
##### 1. 使用 `v
-model` 动态绑定当前激活的
标签页索引
`el
-tabs` 提供了一个名为 `v
-model` 的属性，用于动态控制当前激活的
标签页。可以通过该属性保存并
同步当前活动标签的状态[^1]。
```javascript
data() {
return {
active
TabName: '
tab1' // 默认激活的第一个
标签页
};
},
created() {
this.active
TabName = localStorage.getItem('active
Tab') || '
tab1'; // 加载
时尝试从 localStorage 获取上次激活的标签名
}
```
上述代码片段展示了如何初始化默认激活的
标签页，并从 `localStorage` 中获取上一次用户访问
时所处的位置。
---
##### 2. 将当前激活的标签名称存入 `localStorage`
每当用户
切换标签页时，更新 `localStorage` 来保存最新的激活标签信息。
```html
<template>
<el
-tabs v
-model="active
TabName">
<el
-tab-pane label="首
页" name="
tab1">
内容一</el
-tab-pane>
<el
-tab-pane label="设置" name="
tab2">
内容二</el
-tab-pane>
<el
-tab-pane label="关于" name="
tab3">
内容三</el
-tab-pane>
</el
-tabs>
</template>
<script>
export default {
data() {
return {
active
TabName: ''
}
},
watch: {
active
TabName(newVal) { // 当前激活标签发生
变化时触发此函数
localStorage.setItem('active
Tab', newVal); // 存储新的激活标签名
}
}
};
</script>
```
这里利用
Vue.js 的 `
watch` 特性
监听 `active
TabName` 属性的
变化，在每次
切换标签页时实
时更新 `localStorage`[^3]。
---
##### 3. 利用 URL 查询参数管理
标签页状态 (可选)
除了使用 `localStorage` 外，还可以借助 URL 的查询字符串 (`query string`) 记录当前激活的
标签页编号。这种方法的好处在于更易于分享链接以及兼容某些特殊场景下的需求。
以下是基于 URL 参数的方式
实现逻辑：
```javascript
// 初始化阶段解析 URL 并设定初始值
mounted() {
const urlParams = new URLSearchParams(window.location.search);
const
tabParam = urlParams.get('
tab');
if(
tabParam){
this.active
TabName =
tabParam;
}else{
this.active
TabName = '
tab1';
}
},
methods:{
updateUrl(
tabName){ // 更新地址栏中的 query 参数
history.replaceState(null, '', `${location.pathname}?
tab=${
tabName}`);
}
}
watch:{
active
TabName(newVal){
this.updateUrl(newVal); //
同步修改后的
标签页到 URL 上
}
}
```
这种方式不仅
实现了功能目标，还增强了用户体验的一致性和透明度。
---
#### 完整示例代码
综合以上两种方式，提供如下完整的解决方案：
```
vue
<template>
<div id="app">
<el
-tabs v
-model="active
TabName">
<el
-tab-pane label="首
页" name="
tab1">
内容一</el
-tab-pane>
<el
-tab-pane label="设置" name="
tab2">
内容二</el
-tab-pane>
<el
-tab-pane label="关于" name="
tab3">
内容三</el
-tab-pane>
</el
-tabs>
</div>
</template>
<script>
export default {
data() {
return {
active
TabName: '' // 当前激活的
Tab 名称
};
},
created() {
let saved
Tab = localStorage.getItem('active
Tab'); // 尝试从 localStorage 取出最后使用的
Tab
if (!saved
Tab && window.location.search.length > 0) { // 如果无缓存则检查 URL Query String
const params = new URLSearchParams(window.location.search);
saved
Tab = params.get('
tab');
if(saved
Tab === null){
this.active
TabName = '
tab1'; // 设置默认值以防异常情况发生
}else{
this.active
TabName = saved
Tab;
}
} else if (saved
Tab !== null){
this.active
TabName = saved
Tab;
} else {
this.active
TabName = '
tab1'; // 若两者均不存在，则指定首屏展示的
内容
}
},
methods: {
updateUrl(
tabName) { // 修改地址栏中的 query 参数
history.replaceState({}, document.title, `${location.pathname}?
tab=${
tabName}`);
}
},
watch: {
active
TabName(newVal) {
localStorage.setItem('active
Tab', newVal); // 每次
切换都重新写入 LocalStorage
this.updateUrl(newVal); // 调用方法更改 URL 地址
}
}
};
</script>
```
---
#### 注意事项
- **性能优化**：频繁的操作会带来一定的性能消耗，因此需合理评估实际应用场景再决定是否引入额外机制。
- **跨设备支持**：由于依赖于客户端环境特性(`localStorage`, `URL`), 故对于部分老旧版本
浏览器可能存在局限性，请提前测试验证其适用范围[^4]。
---
本文介绍了如何使用Vue和Element-UI创建一个含有多个tab标签页的编辑页面，并通过watch监听数据变化。当数据变更且用户尝试切换tab时，会弹出提示让用户决定是否保留更改或跳转。
最低0.47元/天 解锁文章
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
