Element Ui 中 nav組件使用子路由跳轉遇到的

看vue官網,子路由通過 router-link傳入id,作爲子路由跳轉的參數,可是 element NavMenu 導航菜單並沒有提供傳參的地方啊!於是就開始跳坑,,

路由配置:

  {path:'/plant', component:Plant},
  {
    path:'/dataSheets',
    component:DataSheets,
    children:[
        {
            path:'/',
            component:payment
        },
        {
          path:'payment',
          // redirect:'payment',
          component:payment
        },
        {
          path:'account',
          component:account,
        },
        {
          path:'modularNum',
          component:modularNum,
        },]


使用element 組件 的代碼:

         <el-menu :default-active="$route.path" class="el-menu-vertical-demo" theme="dark" router>
                <el-menu-item index="/dataSheets/payment" ><i class="icon-cart"></i>計量支付</el-menu-item>
                <el-menu-item index="/dataSheets/account"><i class="icon-integral"></i>分包結算</el-menu-item>
                <el-menu-item index="/dataSheets/modularNum"><i class="icon-data"></i>構建數量統計</el-menu-item>
                <el-menu-item index="/dataSheets/quantities"><i class="icon-iconfont-gcsltj"></i>工程數量統計</el-menu-item>
                <el-menu-item index="/dataSheets/materials"><i class="icon-clxyltj"></i>材料需用量統計</el-menu-item>
                <el-menu-item index="/dataSheets/output"><i class="icon-gcclztj"></i>工程產值統計</el-menu-item>
                <el-menu-item index="/dataSheets/plantOf"><i class="icon-jhzb"></i>計劃佔比</el-menu-item>
                <el-menu-item index="/dataSheets/completeOf"><i class="icon-wczb"></i>完成佔比</el-menu-item>
                <el-menu-item index="/dataSheets/contrastChart"><i class="icon-sldb"></i>數量對比圖</el-menu-item>
                <el-menu-item index="/dataSheets/fabric"><i class="icon-wczb"></i>全棧構造物彙總</el-menu-item>
                <el-menu-item index="/dataSheets/outputPec"><i class="icon-percent"></i>月完成產值百分比</el-menu-item>
                <el-menu-item index="/dataSheets/landMark"><i class="icon-lcb"></i>里程碑</el-menu-item>
                <el-menu-item index="/dataSheets/rainGlass"><i class="icon-text"></i>晴雨表</el-menu-item>
                <el-menu-item index="/dataSheets/teamRank"><i class="icon-gjsltj"></i>隊伍產值排名</el-menu-item>
                <el-menu-item index="/dataSheets/completeRank"><i class="icon-wcpm"></i>完成數量排名</el-menu-item>
            </el-menu>


注意點:

  ① path中不能加 /  

  ② 不要使用 redirect來重定向

  ③ 實現當前點擊的 導航項高亮,使用 

   :default-active="$route.path" 
  ④ index 指向的是子路由的path ,這裏不能寫錯,否則找到

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章