一、路由

這兩天移動端的同事在研究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

根據上面對斜線/“”的理解修改如下

路由程式碼：

選單拼接修改：

那麼：現在正常訪問了！