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

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 LuckyMon 2年前

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

    点赞 评论 复制链接分享

相关推荐