动态路由的配置

通过后端给的menu 数据，生成动态路由

写在vuex 中，要考虑刷新之后丢失的问题，存储在本地

// 判断缓存是否有数据

      if (!Cookies.get('menu')) return

      const menu = JSON.parse(Cookies.get('menu'))

      state.menu = menu

  import Cookies from "js-cookie"; 
  const tabs = { 
  state: { meun: [] }, 
  actions: {}, 
  mutations: { 
  // 动态注册路由 多层嵌套 
  addMenu(state, router) { 
  // 判断缓存是否有数据 
  if (!Cookies.get('menu')) return const menu = JSON.parse(Cookies.get('menu')) 
  state.menu = menu 
  // 组装动态路由数据 
  const menuArray = [] 
  const handleChildren = (children) => { 
  children.forEach(item => { 
  // 判断是否有 path 属性，如果没有则不将其添加到 menuArray 中 
  if (!item.path) { 
  if (item.children) { handleChildren(item.children) } return } 
  if (item.children) { 
  item.children = handleChildren(item.children) 
  } 
  item.component = () => import(`@/views/${item.path}`) menuArray.push(item) }) 
  } 
  menu.forEach(item => { 
  // 判断是否有 path 属性，如果没有则不将其添加到 menuArray 中 
  if (!item.path) { if (item.children) { handleChildren(item.children) } return } 
  if (item.children) { item.children = handleChildren(item.children) }
  item.component = () => import(`@/views/${item.path}`) 
  menuArray.push(item) }) 
  console.log(menuArray, 'menuArray') 
  // 路由的动态添加 
  menuArray.forEach(item => { router.addRoute('Main', item) }); }, 
  
  
  // // 2层嵌套 // 
  addMenu(state,router){ 
  // // 判断缓存是否有数据 
  // if(!Cookies.get('menu')) return 
  // const menu = JSON.parse(Cookies.get('menu')) 
  // state.menu = menu
  // //组装动态路由数据 
  // const menuArray = [] 
  // menu.forEach(item => { 
  // if(item.children){ 
  // item.children = item.children.map(item=>{ 
  // item.component =()=> import (`@/views/${item.path}`) 
  // return item 
  // }) 
  // menuArray.push(...item.children) 
  // }else{ 
  // item.component =()=> import (`@/views/${item.path}`) 
  // menuArray.push(item) 
  // } 
  // }); 
  // console.log(menuArray,'menuArray'); 
  // // 路由的动态添加 
  // menuArray.forEach(item => { 
  // router.addRoute('Main', item) 
  // }); 
  // } 
  }, 
  } 
  
  export default tabs
  

递归

2层嵌套

页面使用

调用vuex的方法

展示