一步步创建vue-element-admin框架实现009-添加tagsview动态tabs页操作功能

一步步创建vue-element-admin框架实现009-添加tagsview动态tabs页操作功能

使用说明：

一步步创建vue-element-admin框架是基于vue-element-admin和vue-admin-template基础版的代码来实现的，文章会经常说直接拷贝项目的文件

一、展示效果

动态展示设置：

二、实现

1）获取vue-element-admin样式文件

直接拷贝vue-element-admin的：src\styles文件夹

2）配置store状态管理

1.新增文件：src\store\modules\tagsView.js

直接拷贝vue-element-admin的：src\store\modules\tagsView.js文件

2.把\tagsView.js文件配置到store状态管理

3.配置全局参数设置

配置：src\settings.js

配置：src\store\modules\settings.js

配置界面设置：src\layout\components\Settings\index.vue

3）layout布局配置

1.新增文件

直接拷贝vue-element-admin的：src\layout\TagsView文件夹

修改内容：src\layout\TagsView\index.vue

  computed: {
    routes() {
      return this.$router.options.routes //因为没有权限控制，直接改成获取全部路由配置信息
    }
  },
  methods: {
     filterAffixTags(routes, basePath = '/') {
      let tags = []
      if (routes) {
        routes.forEach(route => {
            //tagPath调整位置，这个是源框架的一个bug，做了修复
          const tagPath = path.resolve(basePath, route.path)
          if (route.meta && route.meta.affix) {
            tags.push({
              fullPath: tagPath,
              path: tagPath,
              name: route.name,
              meta: { ...route.meta }
            })
          }
          if (route.children) {
            const tempTags = this.filterAffixTags(route.children, tagPath)
            if (tempTags.length >= 1) {
              tags = [...tags, ...tempTags]
            }
          }
        })
      }
      return tags
    },
    }

2.配置：src\layout\components\AppMain.vue

注：样式直接拷贝vue-element-admin的：src\layout\components\AppMain.vue文件

3.配置使用：src\layout\index.vue

4）使用说明

在路由配置使用：src\router\index.js

固定展示，不能删除设置，在meta添加：affix: true

不需要缓存（缓存的意思就是打开过的界面不会重新渲染）设置，在meta添加：noCache: true

注：现在的缓存设置，必须name和组件名一致，不然缓存失败