p28菜单跳转

最新推荐文章于 2024-07-06 16:47:02 发布

z3502603706

最新推荐文章于 2024-07-06 16:47:02 发布

阅读量331

点赞数 8

文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/z3502603706/article/details/136237721

版权

本文介绍了如何使用Vue和el-menu组件，结合VueRouter实现一个可以根据用户权限动态显示不同内容的导航菜单。通过数据绑定和条件渲染，实现在前端根据后端传来的用户权限信息来显示不同功能列表。

摘要由CSDN通过智能技术生成

<template>
    <el-menu 
        active-text-color="#ffd04b"
        text-color="#fff"
        background-color="#545c64"
        default-active="/Home"
        style="height: 100%;"
        :collapse="isCollapse"
        :collapse-transition="false"
        router
    >
        <el-menu-item index = "/Home">
            <i class="el-icon-s-home"></i>
            <span slot="title">主页</span>
        </el-menu-item>

        <!-- <el-menu-item index = "/Admin">
            <i class="el-icon-s-flag" ></i>
            <span>导航1</span>
        </el-menu-item> -->
        
            <el-menu-item :index = "'/'+item.menuClick"  v-for="(item,i) in menu">
            <i class="item.menuIcon" ></i>
            <span slot="title">{{item.menuName}}</span>
            
        </el-menu-item>
        

        <!-- <el-menu-item index = "/User">
            <i class="el-icon-s-data" ></i>
            <span>导航2</span>
        </el-menu-item> -->
    </el-menu>
</template>
<script>
    export default{
        name:"Aside",
        data(){
            return{
                menu:[
                {
                    menuClick:'Admin',
                    menuName:'管理员管理',
                    menuIcon:'el-icon-s-custom'
                },
                {
                    menuClick:'user',
                    menuName:'用户管理',
                    menuIcon:'el-icon-user-solid'
                },
                ]   
            }
            
        },
        props:{
            isCollapse:Boolean
        }
    }
</script>

这里是想根据用户权限不同显示不同的内容，先简单根据传值用循环打印所有功能列表，方便后面根据后端传值显示不同内容

import VueRouter from 'vue-router'
const routes = [
    {
        path:'/',
        name:'login',
        component:()=>import('../components/Login')
    },
    {
        path:'/Index',
        name:'index',
        component:()=>import('../components/Index'),
        children:[
            {
                path:'/Home',
                name:'home',
                meta:{
                    title:'首页'
                },
                component:()=>import('../components/Home'),
            },
            {
                path:'/Admin',
                name:'admin',
                meta:{
                    title:'管理员界面'
                },
                component:()=>import('../components/admin/AdminManage.vue'),
            },
            {
                path:'/User',
                name:'user',
                meta:{
                    title:'用户界面'
                },
                component:()=>import('../components/user/UserManage.vue'),
            }
        ]

        
    }
    

]

const router = new VueRouter({
    mode:'history',
    routes
})
const VueRouterPush = VueRouter.prototype.push
VueRouter.prototype.push = function push (to) {
 return VueRouterPush.call(this, to).catch(err => err)
}
export default router;