【移动端】动态实现主页点击图标跳转

<!-- 导航主页面-->
<template>
    <div id="home">
        <van-nav-bar title="智能产品系统" class="header"  @click-right="onClickRight">
            <template #right>
                <img src="@/assets/images/ic_toolbar_user.png">
            </template>
        </van-nav-bar>
        <div class="menu-flex">
            <div v-for="item in MENUDATE" @click="handleClick(item)" class="menu-img">
                <!-- 按class名动态渲染，图标做背景-->
                <div :class="[item.icon]"></div>
                <p>{{ item.name }}</p>
            </div>
        </div>
    </div>
</template>

<script>
import{ MENU }from '../../../router/menu'

export default {
    name: "home",
    data() {
        return {
            MENUDATE:MENU
        }
    },
    methods: {
        handleClick(e) {
            console.log(e)
            this.$router.push({
                path : e.path,
                query: {
                    params: JSON.stringify(e)
                }
            })
        },
        onClickRight(){  // 跳转个人中心页面
            this.$router.push({ path: '/setting'})
        }
    }
}
</script>

<style lang="less">
    #home{
        p {
            font-size: 16px;
        }
        .header{
            background-image: linear-gradient(to right bottom, rgb(36, 61, 142) 0%, rgb(69, 92, 163) 100%);
            .van-nav-bar__title {
                color: #eee;
                font-size: 22px;
            }
        }
        .menu-flex{
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            .menu-img {
                width: 33%;
                height: 130px;
                margin-top: 30px;
                display: flex;
                flex-direction: column; /* 控制文字在下方*/
                align-items: center;
                background-position: center;
                background-repeat: no-repeat;
                div{

                    width: 100px;
                    height: 100px;
                }
                .task-move-agv {
                    background: url("../../../assets/images/ic_task_move_agv.png");
                    background-size: cover;
                }
                .task-new-task {
                    background: url("../../../assets/images/ic_task_new_task.png");
                }
            }
        }
    }
</style>

menu.js示例

/**
 * 目录菜单
 * 这样写好处是增加模块时只需要增加一项数组对象
 */


export const MENU = [
    {
        name: '作业',
        path: '/agv',
        icon: 'task-move-agv',
        child: [
            {
                name: '绑定与解绑',
                path: '/agv/dealPodAndBerth',
                icon: 'init-bound',
            },
            {
                name: '初始化',
                path: '/agv/initPod',
                icon: 'out-bound'
            },
            {
                name: '循环',
                path: '/agv/CycleOut',
                icon: 'physical-count'
            },
            {
                name: '叫料',
                path: '/agv/MaterialOutbound',
                icon: 'physical-count'
            },
        ]
    },
    {
        name: '人工',
        path: '/artificial',
        icon: 'task-new-task',
        child: [
            {
                name: '上架',
                path: '/artificial/Puton',
                icon: 'init-bound'
            },
            {
                name: '理货',
                path: '/artificial/ArtificialTally',
                icon: 'physical-count'
            },
            {
                name: '盘点',
                path: '/artificial/',
                icon: 'physical-count'
            }
        ]
    }
]