魁哥爱吃黄焖鸡 2019-02-27 10:19 采纳率: 0%
浏览 1326

vue两个导航组件之间传值或者相应的解决办法,在线等求告知。

废话不多说,先把项目截图贴出来。图片说明

这是首页跳转进来之后
Layout组件代码如下。

    <el-container>
        <el-aside width="90px">
            <layout-nav></layout-nav>
        </el-aside>
        <el-container>
            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>

左侧菜单除了概述的页面不含子菜单,红包和设置页面含红包和设置的子菜单,继承的Layout-main组件,
图片说明

Layout-main代码如下

<template>
    <el-container class="layout-main">
        <model-nav></model-nav>
        <el-main class="layout-container">
            <router-view></router-view>
        </el-main>
    </el-container>
</template>

Layout-nav代码如下

<el-menu class="el-menu" 
                    default-active="2" 
                    :key="i" v-for="(items,i) in this.$router.options.routes" 
                    v-if="items.hidden !==true&&items.children[0]">
        <el-menu-item v-for="(item,i) in items.children" :index="item.path" :key="i">
                <template slot="title">
                                        <router-link :to="item.path">
                                                <i class="el-icon-info"></i>
                                                        {{item.meta.title}}
                                        </router-link>
                </template>
         </el-menu-item>
        </el-menu>

路由文件如下

export default new Router({
    routes: [
        {path: '/hello', name: 'HelloWorld', component: HelloWorld, hidden: true},
        {path: '/login', component: () => import("@/views/login/index"), hidden: true},
        {path: '/404', component: () => import("@/views/404"), hidden: true},
        {
            path: "/",
            component: Layout,
            redirect: "/dashboard",
            name: "Layout",
            meta: {title: "首页"},
            children: [
                {
                    path: "/dashboard",
                    name: "dashboard",
                    component: () => import("@/views/dashboard/index"),
                    meta: {title: "概述"}
                },
                {
                    path: "/redpack",
                    component: Layoutmain,
                    redirect: "/redpack/index",
                    meta: {title: "红包"},
                    children: [
                        {path: 'index', component: () => import("@/views/redpack/index"), meta: {title: "数据统计"}},
                        {
                            path: 'lgroup',
                            name: 'lgroup',
                            component: () => import("@/views/redpack/lgroup"),
                            meta: {title: "分组管理"}
                        },
                        {
                            path: 'edit',
                            name: 'edit',
                            component: () => import("@/views/redpack/edit"),
                            meta: {title: "编辑"}
                        },
                    ]
                },
                {
                    path: "/setting",
                    component: Layoutmain,
                    redirect: "/setting/index",
                    meta: {title: "设置"},
                    children: [
                        {path: 'index', component: () => import("@/views/setting/index"), meta: {title: "设置"}},
                    ]
                }
            ]
        },
    ]
})

在Layout-nav中我已经循环遍历出了一级菜单,如何在点击进入一级菜单之后,进入二级菜单时,在model-nav中显示对应的二级菜单呢,路由传值吗?传值我试了把其相应的children传递不成功。小弟初来乍到,求解决方案。

model-nav是另外一个组件,因为我没有获得到数据,无法遍历,代码如下:

<template>
    <el-menu
            default-active="2"
            class="left-menu"
    >
        <el-menu-item index="1" class="left-menu-head">
            红包
        </el-menu-item>
        <el-menu-item index="2">
            <template slot="title">
                <router-link to="/redpack/index">
                    <span>数据统计</span>
                </router-link>
            </template>
        </el-menu-item>
        <el-menu-item index="3">
            <template slot="title">
                <router-link to="/redpack/index">
                    <span>参数设置</span>
                </router-link>
            </template>
        </el-menu-item>
        <el-menu-item index="4">
            <template slot="title">
                <router-link to="/redpack/lgroup">
                    <span>分组管理</span>
                </router-link>
            </template>
        </el-menu-item>
        <el-menu-item index="5">
            <template slot="title">
                <router-link to="/user">
                    <span>批次管理</span>
                </router-link>
            </template>
        </el-menu-item>
        <el-menu-item index="6">
            <template slot="title">
                <router-link to="/module">
                    <span>编码管理</span>
                </router-link>
            </template>
        </el-menu-item>
        <el-menu-item index="7">
            <template slot="title">
                <router-link to="/admin/user2">
                    <span>扫码日志</span>
                </router-link>
            </template>
        </el-menu-item>
    </el-menu>
</template>
  • 写回答

1条回答 默认 最新

  • LuckyMon 2019-02-27 11:20
    关注

    你的Layout-nav代码里面有问题,你可以试试在item.path前面加上/,或者直接添上前面完整的部分,/一级菜单/二级菜单这样

    评论

报告相同问题?

悬赏问题

  • ¥15 oracle集群安装出bug
  • ¥15 关于#python#的问题:自动化测试
  • ¥20 问题请教!vue项目关于Nginx配置nonce安全策略的问题
  • ¥15 教务系统账号被盗号如何追溯设备
  • ¥20 delta降尺度方法,未来数据怎么降尺度
  • ¥15 c# 使用NPOI快速将datatable数据导入excel中指定sheet,要求快速高效
  • ¥15 再不同版本的系统上,TCP传输速度不一致
  • ¥15 高德地图2.0 版本点聚合中Marker的位置无法实时更新,如何解决呢?
  • ¥15 DIFY API Endpoint 问题。
  • ¥20 sub地址DHCP问题