动态路由主要通过两个函数实现。router.addRoute()
和 router.removeRoute()
。它们只注册一个新的路由,也就是说,如果新增加的路由与当前位置相匹配,就需要你用 router.push()
或 router.replace()
来手动导航,才能显示该新路由。
//返回值为删除路由的回调函数
const removeRoute = router.addRoute({ path: '/about', component: About })
有几个不同的方法来删除现有的路由:
通过添加一个名称冲突的路由。如果添加与现有途径名称相同的途径,会先删除路由,再添加路由:
router.addRoute({ path: '/about', name: 'about', component: About })
// 这将会删除之前已经添加的路由,因为他们具有相同的名字且名字必须是唯一的
router.addRoute({ path: '/other', name: 'about', component: Other })
通过调用 router.addRoute()
返回的回调:
const removeRoute = router.addRoute(routeRecord)
removeRoute() // 删除路由如果存在的话
当路由没有名称时,这很有用。
通过使用 router.removeRoute()
按名称删除路由:
router.addRoute({ path: '/about', name: 'about', component: About })
// 删除路由
router.removeRoute('about')
需要注意的是,如果你想使用这个功能,但又想避免名字的冲突,可以在路由中使用 Symbol
作为名字。
当路由被删除时,所有的别名和子路由也会被同时删除
要将嵌套路由添加到现有的路由中,可以将路由的 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
一个用于渲染动态组件或元素的“元组件”。
Props
ts
interface DynamicComponentProps {
is: string | Component
}
详细信息
要渲染的实际组件由 is
prop 决定。
is
是字符串,它既可以是 HTML 标签名也可以是组件的注册名。is
也可以直接绑定到组件的定义。但在实际我使用中,传入字符串时,组件不能正常的被渲染
我按官方文档的这样写
<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>
能正常的渲染。
总结:因此如果要给
官方文档地址: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,
}
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,
}
设置 import
为 default
可以加载默认导出。
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'),
}
请注意:
./
开头)或绝对路径(以 /
开头,相对于项目根目录解析)或一个别名路径(请看 resolve.alias
选项)。import.meta.glob
的参数都必须以字面量传入。你 不 可以在其中使用变量或表达式。和 glob 导入 类似,Vite 也支持带变量的动态导入。
const module = await import(`./dir/${file}.js`)
注意变量仅代表一层深的文件名。如果 file
是 foo/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)
}
}
},
})
}