vue项目开发中踩过的坑

一、路由

这两天移动端的同事在研究vue，跟我说看着我的项目做的，子路由访问的时候是空白的，我第一反应是，不会模块没加载进来吧，还是。。。。此处省略一千字。。。

废话不多说上代码

路由代码

{
    path: '/list',
    name: '列表',
    component: Layout,
    meta: {title: '列表', icon: 'service'},
    redirect: '/orderManger',
    children: [{
      path: '',
      name: '主列表',
      component: List
    },
    {
      path: '/orderManger',
      name: '订单管理',
      component: OrderManger
    }]
  }

　element的菜单组件

  <!--一级菜单-->
      <el-submenu v-for="(item, index) in rounters" :key="index" :index="item.path" v-show="!item.hidden">
          <template slot="title">
            <i v-if="item.meta" :class="'el-icon-'+ item.meta.icon"></i>
            <i v-else :class="el-icon-menu"></i>
            <span>{{item.name}}</span>
          </template>
        <!--二级菜单-->
         <el-menu-item v-for="(childItem, index) in item.children"
                       :key="index"
                       :index="childItem.name"
                       :route="item.path + childItem.path"
                       v-if="!childItem.hidden"
         >
           <span class="second_menu_title" slot="title">{{childItem.name}}</span>
         </el-menu-item>
      </el-submenu>　

问题描述：1、根据以上代码访问list路由时访问列表组件

2、点击订单管理菜单，地址栏地址显示正确的，但是页面渲染为空白

看到代码第一反应是children里的子路由以斜线“”/“”开头了，记得以前踩过这个坑，好像说的是子路由以斜线开头表示绝对路径了，但是当时没记录，年纪大了记性不好，后面就忘了。。。。。（吸取教训，在哪里跌倒，就要在哪里做个标记。。。）

言归正传，后面仔细又去查了下，

 如果路由以“/”开头，那么他会作为根路径进行渲染，也就是一层路由。

如果地址不是/开头，会直接替换当前路由的最后一个/后的地址

所以按照以上的代码的写法，要想访问订单管理的模块应该是在http://localhost:8080/#/orderManger路由下

果然，始终不露面的订单管理页面出来了，但。。。这不是我们想要的。。。。

我们想要的是/list/orderManger

根据上面对斜线/“”的理解修改如下

路由代码：

菜单拼接修改：

那么：现在正常访问了！