vite+vue3使用element的menu动态路由

• 思路：
  1、要想点击左侧的导航，让内容全部在右侧展示
  2、点击登录还要跳转到一个新的页面，不能在导航的右侧
  3、那么一级路由就是登录，还有要展示导航的页面
  4、然后左侧的导航菜单全部要在导航的那个一级路由下进行展示
  5、而导航下的路由，有二级导航，三级导航，说不定还有四级，一个层级的路由需要搭配一个routerView，才会展示页面
  6、可以新建一个只有routerview的页面或者用jsx写一个也可以，有三级导航的时候，二级导航就是这个routerview的公共页面，三级导航的时候，一级，二级就需要用到这个公共的routerview，然后以此类推

• 下面上代码
  1、路由中的格式

const routes = [
  {
    path: '/',
    name: 'LayOut',
    component: LayOut,
    redirect: '/index',
    children: [
      {//一级导航
        path: '/index',
        name: 'IndexPage',
        component: () => import('@/views/index.vue'),
        meta: { key: 'one', title: '首页' }
      },
      {//一级导航
        path: '/workTable',
        name: 'WorkTable',
        component: () => import('@/layout/routerPage.vue'),//公共的路由页面
        meta: {
          title: '工作台',
          key: 'sub1'
        },
        children: [
          {//二级导航
            path: '/newBulletin',
            name: 'NewBulletin',
            component: () => import('@/views/workTable/newBulletin.vue'),
            meta: {
              key: '001',
              title: '公告消息'
            }
          },
          {//二级导航
            path: '/downLoad',
            name: 'DownLoad',
            component: () => import('@/views/workTable/downLoad.vue'),
            meta: {
              key: '002',
              title: '下载专区'
            }
          }
        ]
      },
      {
        //顶部导航1
        path: '/home',
        name: 'Home',
        component: () => import('@/layout/routerPage.vue'),//公共的路由页面
        meta: {
          title: '测试一级导航',
          key: 'sub2'
        },
        children: [
          {
            //2
            path: '/home1',
            name: 'Home',
            replace: true,
            component: () => import('@/layout/routerPage.vue'),//公共的路由页面
            meta: {
              title: '测试二级导航',
              key: '001'
            },
            children: [
              {
                //3
                path: '/home1/home2',
                name: 'Home',
                component: () => import('@/views/home/home2.vue'),
                meta: {
                  title: '测试三级导航',
                  key: '002'
                }
              }
            ]
          },
          {
            path: '/test9',
            component: () => import('@/views/login.vue'),
            meta: {
              title: '测试i',
              key: 'sub3'
            }
          }
        ]
      }
    ]
  },
  {
    path: '/login',
    name: 'LoginPage',
    component: () => import('@/views/login.vue')
  },
  {
    path: '/404',
    name: 'ErrorPage',
    component: () => import('@/views/404.vue')
  }
];

2、layout中的布局页面（也就是一级路由展示的页面）

  

    
      
        //左侧导航的组件
        
      
      
        
          

            

              
              商户支付业务管理平台
            

            

              
欢迎您，xx用户
              

                
                
退出登录
              

            

          

          

            
          
        
        //这是二级路由展示的地方
        
   
      
    
  

3、menu导航组件的页面

4、最终的效果

image.png

image.png