vue后台项目路由跳转（动态路由的几种写法）

vue后台管理系统的几种写法：

第一种写法：声明是写法（动态获取路由，简称动态路由，从后台后区路由地址）：

 <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
          <item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="onlyOneChild.meta.title" />
        </el-menu-item>
      </app-link>

第二种写法：组件库（elementui组建库左侧菜单），路由跳转动态获取路由地址，切记，配置的路由及获取的路由名称必须完全一致，上方与下方同样。

<el-menu  background-color="#545c64" text-color="#fff" active-text-color="#ffd04b"

      :default-active="active" :collapse="fold" :collapse-transition="false" router unique-opened>

      <!-- :index="'' + item.id"控制的是点击某个，那么某个展开 -->

      <el-submenu  :index="'' + item.id" v-for="item in Navbar.data" :key="item.id" :collapse-transition="true" >

        <template slot="title">

          <i :class="iconObj[item.id]"></i>

          <span>{ {item.authName}}</span>

        </template>

          <el-menu-item  :index="'/home/'+ val.path" v-for="val in item.children" :key="val.id" @click="saveNavState('/home/' + val.path)">

              <i class="el-icon-menu"></i>

              <span>{ {val.authName}}</span>

          </el-menu-item>

    </el-submenu>

  </el-menu>

第三种，路由跳转是动态获取，随后动态的给每一个菜单都添加一个点击事件，并且，跳转，此时需要将路由给放在一个数组中，通过便利去跳转，已index作为唯一标识。