«
BuildAdmin源码阅读体会记录(一)

时间:2023-11-25    作者:范文泉    分类: 编程


动态路由主要通过两个函数实现。router.addRoute()router.removeRoute()。它们注册一个新的路由,也就是说,如果新增加的路由与当前位置相匹配,就需要你用 router.push()router.replace() 来手动导航,才能显示该新路由。

//返回值为删除路由的回调函数
const removeRoute = router.addRoute({ path: '/about', component: About }) 

删除路由

有几个不同的方法来删除现有的路由:

当路由被删除时,所有的别名和子路由也会被同时删除

添加嵌套路由

要将嵌套路由添加到现有的路由中,可以将路由的 name 作为第一个参数传递给 router.addRoute(),这将有效地添加路由,就像通过 children 添加的一样:

router.addRoute({ name: 'admin', path: '/admin', component: Admin })
router.addRoute('admin', { path: 'settings', component: AdminSettings })

这等效于:

router.addRoute({
  name: 'admin',
  path: '/admin',
  component: Admin,
  children: [{ path: 'settings', component: AdminSettings }],
})

<component>

官方文档地址:https://cn.vuejs.org/api/options-rendering.html#template

一个用于渲染动态组件或元素的“元组件”。

但在实际我使用中,传入字符串时,组件不能正常的被渲染

我按官方文档的这样写

<template>
    <div>
        <component :is="'Test'"></component>        
    </div>
</template>

<!-- <script>
import Test from './Test.vue';

export default {
  components: {
    Test
  }
}
</script>

又来能成功渲染,我看了Buildadmin里有下面一行

defineOptions({
    components: { Default, Classic, Streamline, Double },
})

然后我把代码里修改成这样

<template>
    <div>
        <component :is="'Test'"></component>        
    </div>
</template>

<script setup>
import Test from './Test.vue';

defineOptions({
    components: { Test },
})
</script>

能正常的渲染。

总结:因此如果要给传字符串,需要用defineOptions进行才可使用字符串传入。

Glob 导入

官方文档地址:https://cn.vitejs.dev/guide/features.html#glob-import

Vite 支持使用特殊的 import.meta.glob 函数从文件系统导入多个模块:

const modules = import.meta.glob('./dir/*.js')

以上将会被转译为下面的样子:

// vite 生成的代码
const modules = {
  './dir/foo.js': () => import('./dir/foo.js'),
  './dir/bar.js': () => import('./dir/bar.js'),
}

你可以遍历 modules 对象的 key 值来访问相应的模块:

for (const path in modules) {
  modules[path]().then((mod) => {
    console.log(path, mod)
  })
}

匹配到的文件默认是懒加载的,通过动态导入实现,并会在构建时分离为独立的 chunk。如果你倾向于直接引入所有的模块(例如依赖于这些模块中的副作用首先被应用),你可以传入 { eager: true } 作为第二个参数:

const modules = import.meta.glob('./dir/*.js', { eager: true })

以上会被转译为下面的样子:

// vite 生成的代码
import * as __glob__0_0 from './dir/foo.js'
import * as __glob__0_1 from './dir/bar.js'
const modules = {
  './dir/foo.js': __glob__0_0,
  './dir/bar.js': __glob__0_1,
}

Glob 导入形式

import.meta.glob 都支持以字符串形式导入文件,类似于 以字符串形式导入资源。在这里,我们使用了 Import Reflection 语法对导入进行断言:

const modules = import.meta.glob('./dir/*.js', { as: 'raw', eager: true })

上面的代码会被转换为下面这样:

// code produced by vite(代码由 vite 输出)
const modules = {
  './dir/foo.js': 'export default "foo"\n',
  './dir/bar.js': 'export default "bar"\n',
}

{ as: 'url' } 还支持将资源作为 URL 加载。

多个匹配模式

第一个参数可以是一个 glob 数组,例如:

const modules = import.meta.glob(['./dir/*.js', './another/*.js'])

反面匹配模式

同样也支持反面 glob 匹配模式(以 ! 作为前缀)。若要忽略结果中的一些文件,你可以添加“排除匹配模式”作为第一个参数:

const modules = import.meta.glob(['./dir/*.js', '!**/bar.js'])
// vite 生成的代码
const modules = {
  './dir/foo.js': () => import('./dir/foo.js'),
}

具名导入

也可能你只想要导入模块中的部分内容,那么可以利用 import 选项。

const modules = import.meta.glob('./dir/*.js', { import: 'setup' })
// vite 生成的代码
const modules = {
  './dir/foo.js': () => import('./dir/foo.js').then((m) => m.setup),
  './dir/bar.js': () => import('./dir/bar.js').then((m) => m.setup),
}

当与 eager 一同存在时,甚至可以对这些模块进行 tree-shaking。

const modules = import.meta.glob('./dir/*.js', {
  import: 'setup',
  eager: true,
})
// vite 生成的代码
import { setup as __glob__0_0 } from './dir/foo.js'
import { setup as __glob__0_1 } from './dir/bar.js'
const modules = {
  './dir/foo.js': __glob__0_0,
  './dir/bar.js': __glob__0_1,
}

设置 importdefault 可以加载默认导出。

const modules = import.meta.glob('./dir/*.js', {
  import: 'default',
  eager: true,
})
// vite 生成的代码
import __glob__0_0 from './dir/foo.js'
import __glob__0_1 from './dir/bar.js'
const modules = {
  './dir/foo.js': __glob__0_0,
  './dir/bar.js': __glob__0_1,
}

自定义查询

你也可以使用 query 选项来提供对导入的自定义查询,以供其他插件使用。

const modules = import.meta.glob('./dir/*.js', {
  query: { foo: 'bar', bar: true },
})
// vite 生成的代码
const modules = {
  './dir/foo.js': () => import('./dir/foo.js?foo=bar&bar=true'),
  './dir/bar.js': () => import('./dir/bar.js?foo=bar&bar=true'),
}

Glob 导入注意事项

请注意:

动态导入

glob 导入 类似,Vite 也支持带变量的动态导入。

const module = await import(`./dir/${file}.js`)

注意变量仅代表一层深的文件名。如果 filefoo/bar,导入将会失败。对于更进阶的使用详情,你可以使用 glob 导入 功能。


路由、菜单、签权数据处理

在获取首页返回的数据后,取出data下的menu数据后

首先把路由部分数据解析出来,通过router.addRouter动态添加路由,其中只处理menu_type=tab

的数据。

处理完路由后,接着处理菜单导航部分数据,只处理type=menu或者menu_dir的数据,处理完成以后保存到navTabs的store里。

处理完菜单后,最后处理权限部分,权限部分只处理type=button的数据,处理完以后保存到navTabs的store里authNode里。

权限路径是 router.currentRoute.value.path + '/' + name)

上面均用到递归处理

/**
 * 页面按钮鉴权
 * @param name
 */
export const auth = (name: string) => {
    const navTabs = useNavTabs()
    // console.log(navTabs.state.authNode)
    if (navTabs.state.authNode.has(router.currentRoute.value.path)) {
        if (navTabs.state.authNode.get(router.currentRoute.value.path)!.some((v: string) => v == router.currentRoute.value.path + '/' + name)) {
            return true
        }
    }
    return false
}
<!-- 操作按钮组 -->
<div v-bind="$attrs" class="table-header ba-scroll-style">
    <slot name="refreshPrepend"></slot>
    <el-tooltip v-if="props.buttons.includes('refresh')" :content="t('Refresh')" placement="top">
        <el-button v-blur @click="onAction('refresh', { loading: true })" color="#40485b" class="table-header-operate" type="info">
            <Icon name="fa fa-refresh" />
        </el-button>
    </el-tooltip>
    <slot name="refreshAppend"></slot>
    <el-tooltip v-if="props.buttons.includes('add') && baTable.auth('add')" :content="t('Add')" placement="top">
        <el-button v-blur @click="onAction('add')" class="table-header-operate" type="primary">
            <Icon name="fa fa-plus" />
            <span class="table-header-operate-text">{{ t('Add') }}</span>
        </el-button>
    </el-tooltip>
    <el-tooltip v-if="props.buttons.includes('edit') && baTable.auth('edit')" :content="t('Edit selected row')" placement="top">
        <el-button v-blur @click="onAction('edit')" :disabled="!enableBatchOpt" class="table-header-operate" type="primary">
            <Icon name="fa fa-pencil" />
            <span class="table-header-operate-text">{{ t('Edit') }}</span>
        </el-button>
    </el-tooltip>

baTable.auth('edit')为鉴权操作,baTable的实现使用的是供应商/注入的方式通信的

下面和当前版本的不一样,但是我感觉这个应该很好用,可以留下作为参考,用v-auth=edit

/**
 * 页面按钮鉴权指令
 * @description v-auth="'name'",name可以为:index,add,edit,del,...
 */
function authDirective(app: App) {
    app.directive('auth', {
        mounted(el, binding) {
            if (!binding.value) return false
            const navTabs = useNavTabs()
            if (navTabs.state.authNode.has(router.currentRoute.value.path)) {
                if (
                    !navTabs.state.authNode
                        .get(router.currentRoute.value.path)!
                        .some((v: string) => v == router.currentRoute.value.path + '/' + binding.value)
                ) {
                    el.parentNode.removeChild(el)
                }
            }
        },
    })
}