vue导航栏部分的动态渲染及新建页面

对之前的代码进行改进和整理之后，进行了导航栏部分新增页面以及导航栏可以无限级新建目录功能的添加。
首先在需要用到的页面用el-menu进行包裹，并配置路由可跳转的属性 ：router=’true’

<el-menu :router='true' class='left_tree'>
 <left-tree :navMenu = 'navMenu'></left-tree>
</el-menu>

然后在被引入的组件中，进行递归循环渲染数据，这里我实现的是可以新增，修改，删除页面的功能

<template>
  <ul class='left_tree'>
    <template v-for='item in navMenu'>
      <el-submenu v-if='item.childs' :index='item.value' class='edit_wrapper' :key='item.id'>
        <template slot='title'>
            <i :class='item.icon'></i>
            <span slot='title'>{{item.alias}}</span>
            <el-popover
                popper-class = 'popover_show'
                placement="right-start"
                width="100"
                trigger="click"
                v-model="item.visible"
                :index="item.id"
                >
                <div class='edit_container'>
                  <button @click='handleAdd(item)'>新增</button>
                  <button @click='handleEdit(item)'>修改</button>
                  <button @click='handleDelete(item)'>删除</button>
                </div>
                <span slot="reference" @click='handleShow(item)' class='iconfont icon-sandianshu edit'></span>
            </el-popover>
        </template>
        <left-tree :navMenu = 'item.childs'></left-tree>
      </el-submenu>
      <el-menu-item v-if='!item.childs' :index='item.value' :key='item.id'>
          <i :class='item.icon'></i>
          <span slot='title'>{{item.alias}}</span>
          <el-popover
              popper-class = 'popover_show'
              placement="right-start"
              width="100"
              trigger="click"
              v-model="item.visible"
              :index="item.id"
              >
              <div class='edit_container'>
                <button @click='handleAdd(item)'>新增</button>
                <button @click='handleEdit(item)'>修改</button>
                <button @click='handleDelete(item)'>删除</button>
              </div>
              <span slot="reference" @click='handleShow(item)' class='iconfont icon-sandianshu edit'></span>
          </el-popover>
      </el-menu-item>
      <el-dialog
      title="新增"
      :visible.sync="dialogVisible"
      width="500px"
      class='dialog1'
      >
        <el-form :model='form' label-width='120px' ref='form'>
          <el-form-item label='中文名称：'>
            <el-input v-model='form.chineseName'></el-input>
          </el-form-item>
          <!-- <el-form-item label='英文名称：'>
            <el-input v-model='form.englishName'></el-input>
          </el-form-item> -->
        </el-form>
        <span slot="footer" class="dialog-footer">
          <button @click="dialogVisible = false" class='btn quxiao'>取消</button>
          <button @click='sureAdd' class='btn sure'>确认</button>
        </span>
      </el-dialog>
      <el-dialog
      title="修改"
      :visible.sync="dialogVisible1"
      width="500px"
      class='dialog1'
      >
        <el-form :model='form1' label-width='120px' ref='form1'>
          <el-form-item label='中文名称：'>
            <el-input v-model='form1.chineseName'></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <button @click="dialogVisible1 = false" class='btn quxiao'>取消</button>
          <button @click='sureEdit' class='btn sure'>确认</button>
        </span>
      </el-dialog>
    </template>
  </ul>
</template>
数据结构及属性,这里我写的是全局变量
const navMenu= [{
          id: '1',
          parentid: '0',
          icon: 'iconfont icon-mulu',
          alias: '金融服务目录',
          value: '/serveManage/serveList',
          visible: false,
          childs: [
            {
              id: '2',
              parentid: '1',
              icon: '',
              alias: '渠道管理',
              value: '/serveManage/channelManage',
              visible: false,
              childs: [
                {
                  id: '3',
                  parentid: '2',
                  icon: '',
                  alias: '渠道内部管理',
                  value: '/serveManage/channelManage_in',
                  visible: false,
                  childs: [
                    {
                      id: '4',
                      parentid: '3',
                      icon: '',
                      alias: '金融类',
                      value: '/serveManage/financial',
                      visible: false,
                    },
                    {
                      id: '5',
                      parentid: '3',
                      icon: '',
                      alias: '非金融类',
                      value: '/serveManage/no_financial',
                      visible: false,
                    },
                    {
                      id: '6',
                      parentid: '3',
                      icon: '',
                      alias: '查询类',
                      value: '/serveManage/query_class',
                      visible: false,
                    },
                    {
                      id: '7',
                      parentid: '3',
                      icon: '',
                      alias: '冲正类',
                      value: '/serveManage/square_class',
                      visible: false,
                    },
                  ]
                },
                {
                  id: '8',
                  parentid: '2',
                  icon: '',
                  alias: '流程服务',
                  value: '/serveManage/process_services',
                  visible: false,
                },
                {
                  id: '9',
                  parentid: '2',
                  icon: '',
                  alias: '合作方服务',
                  value: '/serveManage/cooperation_services',
                  visible: false,
                },
              ]
            },
            {
              id: '10',
              parentid: '1',
              icon: '',
              alias: '客户管理',
              value: '/serveManage/customerManage',
              visible: false,
              childs: [{
                id: '11',
                parentid: '10',
                icon: '',
                alias: '客户信息管理',
                value: '/serveManage/customerInforManage',
                visible: false,
              },
              {
                id: '12',
                parentid: '10',
                icon: '',
                alias: '客户服务管理',
                value: '/serveManage/customerServeManage',
                visible: false,
              }]
            },
            {
              id: '13',
              parentid: '1',
              icon: '',
              alias: '产品管理',
              value: '/serveManage/productManage',
              visible: false,
              childs: [{
                id: '14',
                parentid: '13',
                icon: '',
                alias: '存款',
                value: '/serveManage/saveMoney',
                visible: false,
              },
              {
                id: '15',
                parentid: '13',
                icon: '',
                alias: '贷款',
                value: '/serveManage/loanMoney',
                visible: false,
              },
              {
                id: '16',
                parentid: '13',
                icon: '',
                alias: '支付结算',
                value: '/serveManage/payment',
                visible: false,
              },
              {
                id: '17',
                parentid: '13',
                icon: '',
                alias: '银行卡',
                value: '/serveManage/bank',
                visible: false,
              },
              {
                id: '18',
                parentid: '13',
                icon: '',
                alias: '投资理财',
                value: '/serveManage/investmewnt',
                visible: false,
              },
              {
                id: '19',
                parentid: '13',
                icon: '',
                alias: '中间业务',
                value: '/serveManage/middleServe',
                visible: false,
              },
              {
                id: '20',
                parentid: '13',
                icon: '',
                alias: '客户资产管理',
                value: '/serveManage/assetsManage',
                visible: false,
              },
              {
                id: '21',
                parentid: '13',
                icon: '',
                alias: '客户资产管理',
                value: '/serveManage/financialManage',
                visible: false,
              },
              {
                id: '22',
                parentid: '13',
                icon: '',
                alias: '投行业务',
                value: '/serveManage/investBusiness',
                visible: false,
              }
              ]
            },
            {
              id: '23',
              parentid: '1',
              icon: '',
              alias: '风险管理',
              value: '/serveManage/saveManage',
              visible: false,
            }, {
              id: '24',
              parentid: '1',
              icon: '',
              alias: '管理决策',
              value: '/serveManage/manageDecision',

            }, {
              id: '25',
              parentid: '1',
              icon: '',
              alias: '业务支持',
              value: '/serveManage/businessSupport',
              visible: false,
            }, {
              id: '26',
              parentid: '1',
              icon: '',
              alias: '技术支持',
              value: '/serveManage/technicalSupport', 
              visible: false,            
            }
          ]
        }];

新增的时候，会有对页面的新增和目录的新增两种，所以，我在这里判断了一下是否需要给它增加childs属性

if (!this.nodeMenu.childs) {
          this.$set(this.nodeMenu,'childs',[])
        }
        var list = {};
        list.id = this.GLOBAL.sumNumber++;
        list.parentid = this.nodeMenu.id;
        list.alias = this.form.chineseName;
        list.icon = '';
        list.value = '/serveManage/public_page/' + list.id;
        list.visible = false;
        this.nodeMenu.childs.push(list);
        this.dialogVisible = false;
 }

index.js页面进行的配置：

    {
         path: '/serveManage/public_page/:id',
         name: 'public_page',
         component: public_page
     }

新增模板页面面包屑部分的配置：

<el-breadcrumb separator-class="el-icon-arrow-right" class="catalog">
  <el-breadcrumb-item class="bread_text" :to='item.path' v-for='(item, index) in mycatalog' :key='index'>{{item.name}}</el-breadcrumb-item>
</el-breadcrumb>

新增页面数据部分的处理：

export default {
  name: 'public_page',
  data: function () {
    return {
        id:'',         //记录节点id
        navMenu:[],   //导航数组，用于接收全局数组
        mycatalog:[],  //记录获取到的面包屑
        mycatalognode:{
          name:'',
          path:'',
        },
        dirnode:[],    //记录目标节点
      }
  },
  components: {
    Header,
    PublicHeader
  },
  methods: {
    getInfo () {
      this.id=this.$route.params.id;//当前节点的id
      this.navMenu=this.GLOBAL.navMenu;//节点
      this.mycatalog=[];//导航渲染部分数组
      this.search(this.navMenu,this.id);
      this.mycatalog = this.mycatalog.reverse();//顺序颠倒处理
    },
    //递归查询
    search (navMenu, id) {
      for(var i in navMenu) {
        if(navMenu[i].id == id){
          this.mycatalognode.name = navMenu[i].alias;
          this.mycatalognode.path = navMenu[i].path;
          this.mycatalog.push(JSON.parse(JSON.stringify(this.mycatalognode)));
          this.search(this.navMenu, navMenu[i].parentid);//找到当前节点id后，对他的父级进行查找
        } else {
          this.search(navMenu[i].childs, id);
        }
      }
    }
  },
  mounted(){
    this.getInfo();
  },
  watch:{
    '$route':'getInfo',//监听路由的实时变化，进行相应数据的渲染
  }

可能方法有点笨，误喷。
效果预览：
新建前：

新建后：