vue-pure-admin源码解读与使用

vue-pure-admin

全面使用ESM+Vue3+Vite+Element-Plus+TypeScript编写的一款后台管理系统（兼容移动端）,目前斩获11.5k个star。

界面构成

主题Layout的组成

• 左边sidebar由Vertical组件定义
• tab标签栏由layoutHeader组件定义
• 中间Body由appMain组件定义

为何点击链接都会打开一个tab页？

看一下tag/index.vue里的实现。每次我们进行路由跳转时，做了两件事情:

1. useMultiTagsStoreHook().handleTags(“push”, {})
2. router.push({})
   前者添加一个tab，后者切换一下路由。Tag组件的绘制在components/tag/index.vue中。
   Tab的实现：

<div v-for="(item, index) in multiTags">

<keep-alive>
    <router-link :to="{path: item?.path, query: item?.query}"
    >{{ transformI18n(item.meta.title, item.meta.i18n) }}
    </router-link>
</keep-alive>
</div>

点击每个tab时，调用tagOnClick()方法触发tags标签切换:

function tagOnClick(item) {
    router.push({
        path: item?.path,
        query: item?.query
    });
    showMenuModel(item?.path, item?.query);
}

链接

• vue-pure-admin