Talk is cheap

手摸手带你看vue-element-template源码:tab标签导航的实现

这篇文章的主要目的是记录如何从vue-element-admin这个项目中,将你所需要Tab标签页导航功能迁移到Vue-element-template中。至于其中具体的代码实现会在后面的文章中再提到。


  1. 首先下载vue-element-template的源码,如果你git有问题,也可以直接下载zip源码包。然后在项目的根目录先执行 npm install 下载安装相关的依赖,然后就可以开始这篇手摸手的教程了。

  2. 然后打开vue-element-admin项目的开发文档,注意到底部的“移除” tab导航的相关说明中提到的地方是整个Tab导航实现的关键。下面按照“正常开发的逻辑”来一一的剖析。注意这里的逻辑顺序,意在告诉你如何来理解这个框架的实现,而不是仅仅告诉你添加哪些文件,可以让你实现该功能。

    首先找到 @/layout/components/AppMain.vue 然后移除 keep-alive
    然后移除整个 @/layout/components/TagsView.vue 文件,并在@/layout/components/index 和 @/layout/Layout.vue 移除相应的依赖。最后把 @/store/modules/tagsView 相关的代码删除即可

  3. 先来看一下admin版本中系统的路由src\router\index.js 清楚地写道:、

    {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [
      {
        path: 'dashboard',
        component: () => import('@/views/dashboard/index'),
        name: 'Dashboard',
        meta: { title: 'Dashboard', icon: 'dashboard', affix: true }
      }
    ]
    },

    这是一个典型的嵌套路由写法,如果对嵌套路由的写法不懂得,可以查看这里的开发文档-vue-router嵌套路由, 简单的来说就是用这里配置的@/views/dashboard/index 这个组件来替换 Layout 组件中的<router-view :key="key" /> 标签。 但是我们打开@layout/index.js 发现这个里面并没有<router-view>这个东西啊。别急,注意看@layout/index.js里面存在着一个 <app-main />标签,没错,这个标签就是在'@/layout/components/AppMain.vue' 这个文件中定义的。比较template中和admin中该文件的区别仅仅是 多包裹了 一个 <keep-alive :include="cachedViews">标签,这个标签的作用是: 缓存已经打开的标签页,如果使用这个标签页的话 当用户刷新当前页面,其他已经打开的tab导航不会消失,如果不使用这个标签,当刷新浏览器就又会重新回到首页如果对着一点理解清楚的话,那么剩下东西虽然多,但是都围绕着AppMain.vue这个文件做文章了,注意admin版的AppMain.vue有个计算属性:

    export default {
    name: 'AppMain',
    computed: {
    cachedViews() {
      return this.$store.state.tagsView.cachedViews //注意这里
    },
    key() {
      return this.$route.fullPath
    }
    }
    }
    如果不需要缓存tab导航可以直接删除 这个计算属性,同时删除 keepalive标签

    这个计算属性中就引入了另外一个重要文件tagsView.js 这个文件主要就是计算和存储缓存tab页的。

  4. 搞明白 <AppMain>这个标签后, @/src/layout/index.js文件中还存在一个自定义标签:'',这个标签存在与@src/loyout/components目录下,可以直接将admin版的下的 tagsviews考过来
    完成之后可以在 @/src/layout/index.js 中 import 和components属性下引入,然后在在模板中加入这个标签。

    <template>
    <div :class="classObj" class="app-wrapper">
    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
    <sidebar class="sidebar-container" />
    <div class="main-container">
      <div :class="{'fixed-header':fixedHeader}">
        <navbar />
        <tags-view v-if="needTagsView" />
      </div>
      <app-main />
    </div>
    </div>
    </template>

    这里还引入了一个 @import "~@/styles/variables.scss";样式文件,注意从admin中复制过来。否则样式会有些问题。做完这一步 离成功就很近了。

  5. 剩下的就是要处理 state中全局变量的问题了,这里有个专门的文件 在@src/store/module/tagsView 复制过来。在这个目录中还有一个 permission.js 这个控制权限的文件 也一起复制过来。 基本就over了
    刷新你的页面,你会发现会给你报错! 说标签没有注册啊 某些类的属性不存在之类的。 这些问题基本都是需要的组件没有import 的问题,具体看下报错信息就很容易解决了。这里说个常容易忘记的地方就是 @/src/layout/components/index.js 要在这个文件中输出 TagsView组件。
    export { default as TagsView } from './TagsView/index.vue'

  6. 如果还有问题 可以直接问我。。或者发留言。 也可以参考我修改过后的项目源码--->码云地址

未经允许不得转载:CheapTalk » 手摸手带你看vue-element-template源码:tab标签导航的实现
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!