当前位置:首页 > vue递归实现级联菜单 vue2.x

vue递归实现级联菜单 vue2.x

发布于 2019-04-26 阅读 759 次 Vue Javascript

写这篇文章主要是最近在准备后台管理系统的改版调研,想到了vue+elementui+router+vux+vuecli,然后后台侧边栏菜单涉及到两个问题,一个是级联菜单(我希望实现无限级联菜单,这样一劳永逸)另一个是权限问题。
说说我的解决思路:

级联菜单的思路

我打算用vue官方提供的递归组件来实现,官方说的很清楚,但是代码只写出来关键部分这里我自己写了一个例子,挺好用的。下面贴出代码:
index.vue

  1. <template>
  2. <div class="wp50">
  3. <tree-folder :folder="folders"></tree-folder>
  4. </div>
  5. </template>
  6. <style>
  7. .mb20{margin-bottom:20px;}
  8. .wp50{width:50%;margin:0 auto;}
  9. </style>
  10. <script>
  11. import treeFolder from '@/modules/tree-folder.vue'
  12. export default{
  13. data(){
  14. return{
  15. folders: {
  16. name:'全部',
  17. children:[
  18. {
  19. name:'一级标题1',
  20. children:[
  21. {
  22. name:'二级标题1',
  23. children:[
  24. {
  25. name:'三级标题1'
  26. },
  27. {
  28. name:'三级标题2'
  29. }
  30. ]
  31. }
  32. ]
  33. },
  34. {
  35. name:'一级标题2'
  36. },
  37. {
  38. name:'一级标题3'
  39. }
  40. ]
  41. }
  42. }
  43. },
  44. components:{
  45. treeFolder
  46. }
  47. }
  48. </script>


tree-folder.vue

  1. <template>
  2. <div>
  3. <p>
  4. <span>{{ folder.name }}</span>
  5. <tree-folder-content :children="folder.children"></tree-folder-content>
  6. </p>
  7. </div>
  8. </template>
  9. <style>
  10. .mb20{margin-bottom:20px;}
  11. .wp50{width:50%;margin:0 auto;}
  12. </style>
  13. <script>
  14. export default{
  15. props:{
  16. folder:Object
  17. },
  18. data(){
  19. return {
  20. }
  21. },
  22. beforeCreate: function () {
  23. },
  24. name:'treeFolder',
  25. components:{
  26. treeFolderContent: () => import('@/modules/tree-folder-content.vue')
  27. }
  28. }
  29. </script>


tree-folder-content.vue

  1. <template>
  2. <div>
  3. <ul>
  4. <li v-for="child in children" :key="index">
  5. <tree-folder v-if="child.children" :folder="child"></tree-folder>
  6. <span>{{ child.name }}</span>
  7. </li>
  8. </ul>
  9. </div>
  10. </template>
  11. <style>
  12. .mb20{margin-bottom:20px;}
  13. .wp50{width:50%;margin:0 auto;}
  14. </style>
  15. <script>
  16. import treeFolder from '@/modules/tree-folder.vue'
  17. export default{
  18. props:{
  19. children:Array
  20. },
  21. data(){
  22. return {
  23. }
  24. },
  25. name:'treeFolderContent',
  26. components:{
  27. treeFolder
  28. }
  29. }
  30. </script>

路由权限思路

关于权限这块我还没有写(所以这里只说思路,因为代码我还没写完,有了思路,相信都自己研究一下子应该能写出来)
我想的是,默认情况下路由列表只有登录路由和首页路由,将其他路由列表以json的形式存入后台数据库,这样登录的时候后台根据用户权限返回路由列表,然后用addRouts()方法动态推入路由列表。