《vue3+ts+element-plus 后台管理系统系列五》之 标签栏导航(TagsView)

vue3-composition-admin 是一个管理端模板解决方案，它是基于vue3,ts和element-plus，项目都是以composition api风格编写。
 

• 演示地址：https://admin-tmpl.rencaiyoujia.com/
• github地址：https://github.com/rcyj-FED/vue3-composition-admin

演示

---

tagsview 现在的后端管理平台现在基本上成必须了，先看下效果。

 

代码实现

---

总体思路：

利用keepalive和routeLink解决，数据是通过vuex进行管理。

数据的来源：同样是监听路由变化的时候添加route

代码引用 @/components/tags-views/Index.vue

 watch(() => currentRoute.name, () => {
      addTags()
      moveToCurrentTag()
    })

实现步骤：

• 切换路由页面，监听路由变化
• visitedViews 数组收集访问的页面
• 更新页面

 

visitedViews && cachedViews

---

目前 tags-view 维护了两个数组。

• visitedViews : 用户访问过的页面 就是标签栏导航显示的一个个 tag 数组集合
• cachedViews : 实际 keep-alive 的路由。可以在配置路由的时候通过 meta.noCache 来设置是否需要缓存这个路由 默认都缓存。

 

缓存

---

利用Keepalive缓存，对用的是cachedViews数组里的路由都会被缓存。

AppMain需要设置一下：

 <transition
      name="fade-transform"
      mode="out-in"
    >
      <keep-alive :include="cachedViews">
        <router-view :key="key" />
      </keep-alive>
    </transition>

不需要的这里去掉就行。
 

Affix 固钉

---

当在声明路由是 添加了 Affix 属性，则当前tag会被固定在 tags-view中（不可被删除）。

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

 

注意事项

---

由于目前 keep-alive 和 router-view 是强耦合的，而且查看文档和源码不难发现 keep-alive 的 include 默认是优先匹配组件的 name ，所以在编写路由 router 和路由对应的 view component 的时候一定要确保 两者的 name 是完全一致的。(切记 name 命名时候尽量保证唯一性 切记不要和某些组件的命名重复了，不然会递归引用最后内存溢出等问题)

DEMO:

//router 路由声明
{
  path: 'create-form',
  component: ()=>import('@/views/form/create'),
  name: 'createForm',
  meta: { title: 'createForm', icon: 'table' }
}

//路由对应的view  form/create
export default {
  name: 'createForm'
}

一定要保证两者的名字相同，切记写重或者写错。默认如果不写 name 就不会被缓存，详情见issue。