element tags-view-container 添加指定页面高亮
时间: 2023-08-02 21:07:47 浏览: 88
要在 `tags-view-container` 中添加指定页面的高亮,可以使用 `watch` 监听 `$route` 的变化,然后根据当前页面的路由信息,在标签栏中找到对应的标签,并添加 `active` 类。
示例代码如下:
```html
<template>
<div class="tags-view-container">
<div
v-for="(item, index) in visitedTabs"
:key="item.path"
:class="['tags-view-item', { active: isActive(item) }]"
@click="handleClick(item)"
>
{{ item.meta.title }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
visitedTabs: [] // 存储已访问的页面信息
};
},
watch: {
// 监听 $route 变化,更新 visitedTabs 数组
$route(to) {
const visitedTab = this.visitedTabs.find(tab => tab.path === to.path);
if (!visitedTab) {
this.visitedTabs.push({
path: to.path,
meta: to.meta
});
}
}
},
methods: {
// 判断指定页面是否处于激活状态
isActive(item) {
return this.$route.path === item.path;
},
// 点击标签切换页面
handleClick(item) {
this.$router.push(item.path);
}
}
};
</script>
```
在上面的示例代码中,我们使用 `visitedTabs` 数组来存储已访问的页面信息,然后使用 `v-for` 渲染标签栏中的每个标签。在标签栏中添加 `active` 类的条件是,当前页面的路由信息与标签的路由信息相同。
最后,在点击标签时,使用 `$router.push` 方法切换页面。
阅读全文