vue3+Element采用递归调用封装导航栏实现

目录

• 效果预览
• 模拟数据
• 父组件aside.vue 
• 子组件subAside.vue
• 配置

效果预览

模拟数据

• 数据来源有很多，可以是自己写死的，也可以是后端调用得到的，也可以从别的组件中拿到
• 这里采用从路由中拿
• 定义数据源src/router/module.js/

const Login = () => import('../views/Login/Login.vue');
const Layout = () => import('../layout/layout.vue');
const Home = () => import('../views/Home.vue');
const User = () => import('../views/About.vue');
const Avatar = () => import('../views/Users/Avatar.vue');
const Password = () => import('../views/Users/Password.vue');

const routes = [
  {
    path: '/',
    redirect: '/home',
  },
  {
    path: '/',
    name: 'Layout',
    component: Layout,
    meta: {
      permission: true,
    },
    children: [
      {
        path: '/home',
        name: 'Home',
        component: Home,
        meta: {
          title: '首页',
          icon: '', // iconfont图标
          inSide: true,
        },
      },
      {
        path: '/user',
        name: 'User',
        component: User,
        meta: {
          title: '个人中心',
          icon: '',
        },
        children: [
          {
            path: '/user/avatar',
            name: 'Avatar',
            component: Avatar,
            meta: {
              title: '修改头像',
            },
            children: [
              {
                path: '/setUp/avatar',
                name: 'setUp',
                component: Avatar,
                meta: {
                  title: '暂无',
                },
              },
            ],
          },
          {
            path: '/user/password',
            name: 'Password',
            component: Password,
            meta: {
              title: '修改密码',
            },
          },
        ],
      },
      {
        path: '/setUp',
        name: 'SetUp',
        meta: {
          title: '系统设置',
          icon: '',
        },
        children: [
          {
            path: '/setUp/avatar',
            name: 'setUp',
            component: Avatar,
            meta: {
              title: '暂无',
            },
          },
          {
            path: '/setUp/avatar',
            name: 'setUp',
            component: Avatar,
            meta: {
              title: '暂无',
            },
          },
        ],
      },
    ],
  },

  {
    path: '/login',
    name: 'Login',
    component: Login,
  },
];
export default routes;

递归实现导航栏渲染

• 对于导航栏渲染难点在于不知道有多少层级的导航，可能一级也可能两级或者更多
• 为了方便采用两个组件父组件aside.vue与子组件subAside.vue渲染导航
• 这时候就需要采用递归的方式
  • 首先判断哪些数据需要渲染，需要的拿出来
  • 判断是否有子节点需要渲染
    • 有子节点，递归调用子组件本身
    • 没有子节点，返回导航项进行渲染

父组件aside.vue 

父组件处理后的用于渲染的数据

[
	{
		component: () => import('/src/views/Home.vue')
		meta: {title: '首页', icon: '', inSide: true}
		name: "Home"
		path: "/home"
	},
	{
		component: () => import('/src/views/About.vue')
		meta: {title: '个人中心', icon: ''}
		name: "User"
		path: "/user"
		chilren:[
		{
			children: [{…}]
			component: () => import('/src/views/Users/Avatar.vue?t=1655544364909')
			meta: {title: '修改头像'}
			name: "Avatar"
			path: "/user/avatar"
		},
		{
			component: () => import('/src/views/Users/Password.vue')
			meta: {title: '修改密码'}
			name: "Password"
			path: "/user/password"
		}
		]
	},
	{
		meta: {title: '系统设置', icon: ''}
		name: "SetUp"
		path: "/setUp"
		chilren:[
		{
			component: () => import('/src/views/Users/Avatar.vue?t=1655544364909')
			meta: {title: '暂无'}
			name: "setUp"
			path: "/setUp/avatar"
		},
		{
			component: () => import('/src/views/Users/Avatar.vue?t=1655544364909')
			meta: {title: '暂无'}
			name: "setUp"
			path: "/setUp/avatar"
		}
		]
	}
]

子组件subAside.vue

配置

版本

"vue": "^3.2.25",
 "element-plus": "^2.2.6",

main.ts中配置

import { createApp } from 'vue';
import App from './App.vue';
// import 'virtual:windi.css';
import router from './router/index';
/**
 * 引入elment
 */
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
 import 'element-plus/theme-chalk/dark/css-vars.css'
 import './styles/dark/css-vars.css'


// 引入 Pinia 状态管理工具
import pinia from './stores'

const app=createApp(App)
 /**
  * 全局注册组件
  */
import SubAside from './components/subAside.vue'
app.component('SubAside', SubAside)


// 注册Element全局可用
app.use(ElementPlus).use(router).use(pinia).mount('#app');

到此这篇关于vue3+Element采用递归调用封装导航栏实现的文章就介绍到这了,更多相关vue3 Element封装导航栏内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！