Vue 动态菜单+动态路由（基于Element UI）

文章目录

• 使用场景
• 一、动态菜单
  • 1.创建菜单组件
• 二、动态面包屑
  • 1.创建面包屑组件
• 三、动态标签页
  • 1.创建标签页组件
• 四、动态路由
  • 1.router代码
  • 2.store代码
• 总结

---

使用场景

主要使用Vue3与Element UI，在项目开发中可能会遇到从后端取得数据，到前端去渲染菜单，从而实现动态路由与动态菜单。

---

一、动态菜单

1.创建动态菜单组件

 代码如下：

二、动态面包屑

1.创建面包屑组件

代码如下：

 三、动态标签页

1.创建标签页组件

代码如下：

 四、动态路由

1.router

index.js代码如下：

import { createRouter, createWebHistory } from 'vue-router'
import store from '@/store';

const routes = [//初始静态路由
  {
    path: '/',
    name: 'login',
    component: () => import('@/views/Login.vue'),
  },
  {
    path: '/index',
    name: 'Homepage',
    component: () => import('@/views/Homepage.vue'),
    redirect: '/index/Home',
    children: [{
      path: 'Home',
      name: 'Home',
      component: () => import('@/views/Home.vue'),
    }]
  },
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

var tag = true;//设置全局变量
//路由拦截
router.beforeEach(async (to, form, next) => {
  //第一次登录时，全局变量为true执行，第二次刷新，再次执行
  if (tag) {
    tag = false;
    if (to.name === 'login') {
      next()
    } else {
      let Routers = store.state.Routers;
      addRoutes(Routers);
      next(to.path);
    }
  } else {
    next()
  }
})
//添加路由的方法
export function addRoutes(res) {
  res.forEach((Router, index) => {
    router.addRoute({
      path: Router.path,
      name: Router.name,
      component: () => import('@/views/' + Router.name + '.vue'),
    })
    let childrens = Router.children;
    if (childrens != undefined) {
      for (let i = 0; i < childrens.length; i++) {
        if (childrens[i] != undefined) {
          router.addRoute('Homepage', {
            path: childrens[i].path,
            name: childrens[i].name,
            component: () => import('@/views/' + childrens[i].name + '.vue')
          })
        }
      }
    }
  })
}

export default router

2.store

index.js代码如下：

import { createStore } from 'vuex';
import router from '@/router';

export default createStore({
  state: {
    Routers: '',//登录获取的全部路由
    setAsyncRoutestMark: 'false',
    TabseditableTabsValue: 'Home',//当前选中Tab的名字
    Breadcrumb_title: '员工管理',//菜单栏标签
    //全部标签
    Tabs: [
      {
        title: '员工信息表',
        name: 'Home',
        path: '/index/Home',
      }
    ],
    //选中的标签
    Breadcrumb: {
      title: '员工信息表',
      name: 'Home',
      path: '/index/Home'
    }

  },
  getters: {
    getTabs: state => {
      return state.Tabs;
    },
    getRouters: state => {
      return state.Routers;
    }
  },
  mutations: {
    //添加tabs路由
    setTabRouter(state, data) {
      state.Tabs.push(data)
    },
    // 删除tabs路由
    delTabRouter(state, data) {
      let index = 0;
      for (let option of state.Tabs) {
        if (option.path == data) {
          break
        }
        index++
      }
      state.Tabs.splice(index, 1);
      // 删完路由后也要保存到session中
      // sessionStorage.setItem('Tabs', JSON.stringify(state.Tabs))
    },
    // 设置当前激活的tabs
    setActiveIndex(state, index) {
      state.TabseditableTabsValue = index
      state.Breadcrumb.name = index;
    },
  },
  actions: {
    
  },
  modules: {
  }
})

---

总结思路

1.  路由守卫判定当初次登录时，后端返回路由数据，处理完数据放进vuex存起来。

2.（1）菜单组件去获取vuex的路由数据，进行处理形成自己需要的菜单数据并进行渲染。

   （2）标签页组件去vuex获取Tabs数据，进行渲染。

     (3)   面包屑直接从vuex里获取数据，进行渲染。

3.  操作（1）当子菜单栏被点击时，在vuex(即store)里面添加Tab数据，同时标签页、面包屑实时渲染。

     操作（2）当标签页被删除时，在vuex里删除其数据，同时选中上一次点击的子菜单栏和标签页，面包屑也跟着变化

     操作（3）  切换标签，动态菜单跟着切换选中

4.  当路由守卫判定不为初次登录时，则被认为是在刷新，则从sessionStorage缓存中找到数据赋值给store，重新渲染路由，使页面不为空白