vue專案開發中踩過的坑
阿新 • • 發佈:2018-12-28
一、路由
這兩天移動端的同事在研究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
根據上面對斜線/“”的理解修改如下
路由程式碼:
選單拼接修改:
那麼:現在正常訪問了!