希望老师可以讲解下后台页面的多标签页实现

来源：5-5 项目结构分析

qq_慕瓜7353142

2019-12-05

对这个功能一直迷迷糊糊的

写回答

1回答

Sam

2019-12-05

好的，该组件源码位于：src/Layout/components/TagsView/index.vue，核心代码如下：

<router-link
  v-for="tag in visitedViews"
  ref="tag"
  :key="tag.path"
  :class="isActive(tag)?'active':''"
  :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
  tag="span"
  class="tags-view-item"
  @click.middle.native="!isAffix(tag)?closeSelectedTag(tag):''"
  @contextmenu.prevent.native="openMenu(tag,$event)"
>
  {{ tag.title }}
  <span v-if="!isAffix(tag)" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
</router-link>

可以看出 TagsView 每一个元素实际是一个 router-link 组件，router-link 的值遍历了 visitedViews，visitedViews 来源于 vuex：this.$store.state.tagsView.visitedViews，在 TagsView 中监听了路由的变化：

watch: {  
  $route() {    
    this.addTags()    
    this.moveToCurrentTag()  
  },
}

当路由发生变化时，TagsView 会向 visitedViews 中插入一条数据，并将高亮的 tag 置为当前访问的路由，简单来说就是这样

Vue Element+Node.js开发企业通用管理后台系统

基于Element的中后台课程，一套中小型企业通用的后台管理系统

2829 学习 · 1714 问题

查看课程

相似问题

如何监控一个页面的关闭？

回答 1

老师你好，我到这一步卡住了可以上传到数据库，解析失败，页面上没有展示出数据

回答 1

回答 1

回答 1

回答 1