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 ,这里不能写错,否则找到

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值