有特点的个人网站,注册wordpress博客,网站模板外包,佛山app平台1. 创建路由时将路由信息对象进行抽离
将路由信息对象单独抽离到router/routes.ts文件
关键#xff1a;利用路由元信息meta#xff0c;定义3个属性
hidden#xff1a;控制当前路由是否显示在菜单栏中title#xff1a;菜单拦名称icon#xff1a;对应菜单名称前面的图标 …1. 创建路由时将路由信息对象进行抽离
将路由信息对象单独抽离到router/routes.ts文件
关键利用路由元信息meta定义3个属性
hidden控制当前路由是否显示在菜单栏中title菜单拦名称icon对应菜单名称前面的图标
//对外暴露配置路由(常量路由)
export const constantRout [{path: /screen,component: () import(/views/screen/index.vue),name: Screen,meta: {hidden: false,title: 数据大屏,icon: Platform,},},{path: /acl,component: () import(/layout/index.vue),name: Acl,meta: {hidden: false,title: 权限管理,icon: Lock,},children: [{path: /acl/user,component: () import(/views/acl/user/index.vue),name: User,meta: {hidden: false,title: 用户管理,icon: User,},},{path: /acl/role,component: () import(/views/acl/role/index.vue),name: Role,meta: {hidden: false,title: 角色管理,icon: UserFilled,},},{path: /acl/permission,component: () import(/views/acl/permission/index.vue),name: Permission,meta: {hidden: false,title: 菜单管理,icon: Monitor,},},],},
]
在router/index.ts文件引入router.ts文件
import { createRouter, createWebHashHistory } from vue-router
import { constantRoute } from ./routes
//创建路由器
const router createRouter({//路由模式hashhistory: createWebHashHistory(),routes: constantRoute,//滚动行为scrollBehavior() {return {left: 0,top: 0,}},
})
export default router
2. 将路由信息对象挂载到pinia仓库中
将路由信息对象挂载到pinia仓库中是为了数据共享供组件使用
//引入路由常量路由
import { constantRoute } from ../../router/routes
const useUserStore defineStore(User, {state: (): userState {return {token: GET_TOKEN(),// 存储路由信息用来遍历生成菜单结构menuRoutes: constantRoute, //仓库存储生成菜单需要数组(路由)}},
}
完成将路由信息挂载到pinia仓库中
3. 在组件中通过路由信息对象渲染菜单
Menu是封装的组件接收父组件传递的userStore.menuRoutes也就是存放在pinia仓库中的路由信息对象 !-- 展示菜单区域 --el-scrollbar classscrllbarel-menu background-color#001529 text-colorwhite!-- 根据路由动态生成菜单 --Menu :menuListuserStore.menuRoutes/Menu/el-menu/el-scrollbar
在子组件Menu中声明接收
//通过props接收父组件传递的路由组件信息
defineProps([menuList])
Menu组件完整写法
思路通过路由信息对象中的children属性判断是否有子路由如果有子路由则继续判断子路由的个数从而进行对应的判断处理
template!-- 根据路由来遍历左侧菜单展示信息 --template v-for(item, index) in menuList :keyitem.path!-- 没有子路由 --template v-if!item.childrenel-menu-itemv-if!item.meta.hidden:indexitem.pathclickgoRoutetemplate #titleel-iconcomponent :isitem.meta.icon/component/el-iconspan{{ item.meta.title }}/span/template/el-menu-item/template!-- 有子路由但是只有一个 --template v-else-ifitem.children item.children.length 1el-menu-itemv-if!item.children[0].meta.hidden:indexitem.children[0].pathclickgoRoutetemplate #titleel-iconcomponent :isitem.children[0].meta.icon/component/el-iconspan{{ item.children[0].meta.title }}/span/template/el-menu-item/template!-- 有子路由且个数大于一个 --template v-ifitem.children item.children.length 1el-sub-menu :indexitem.pathtemplate #titleel-iconcomponent :isitem.meta.icon/component/el-iconspan{{ item.meta.title }}/span/templateMenu :menuListitem.children/Menu/el-sub-menu/template/template
/templatescript setup langts
import { useRouter } from vue-router//通过props接收父组件传递的路由组件信息
defineProps([menuList])
let $router useRouter()
const goRoute (vc: any) {//路由跳转$router.push(vc.index)
}
/script
script langts
// 当子路由个数大于等于一个时并且或许子路由还有后代路由时。
// 这里我们使用了递归组件。递归组件需要命名另外使用一个script标签vue2格式。
export default {name: Menu,
}
/script
style scoped langscss
/style
注意在Menu组件中使用了Menu递归组件递归组件需要命名另外使用一个script标签vue2格式。
export default {name: Menu,
}
注意在el-menu-item组件中有一个click方法对应一个函数由element提供会接收一个组件实例参数并配合useRouter进行路由跳转
const goRoute (vc: any) {//路由跳转$router.push(vc.index)
}
