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

星宇大前端

发布于 2021-02-22 14:58:55

2.3K0

发布于 2021-02-22 14:58:55

文章被收录于专栏：大宇笔记大宇笔记

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。

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2021-02-04 ，如有侵权请联系 cloudcommunity@tencent.com 删除

缓存

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度