vue使用element-ui，动态渲染导航栏和面包屑

最新推荐文章于 2023-07-30 14:55:45 发布

ygx_work

最新推荐文章于 2023-07-30 14:55:45 发布

阅读量5.5k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue js

本文链接：https://blog.csdn.net/ygx_work/article/details/105849283

vue 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了如何在Vue项目中使用Element-UI动态渲染导航栏和面包屑。通过引入Element-UI，设置基础架构，处理导航数据，利用Vuex存储和处理数据，以及在页面中引入和渲染面包屑组件，详细阐述了实现这一功能的八步流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue动态渲染导航栏和面包屑

废话不多说，直接上代码。
第一步，引入element-ui，这个步骤参考element-ui的官方网站
第二步，基础架构

  <div id="leftNav">
        <el-menu
                class="el-menu-vertical-demo"
                text-color="#ffffff"
                background-color="#00B8D2"
                active-text-color="#ffffff"
                :default-active="leftNavActive"
                router>
            <el-menu-item
                    v-for="(item,index) in leftNavData"
                    :key="index"
                    :index=item.path
                    @click="getRouter(item.path,item.name)">
                <div>
                    <i :class=item.iconName></i>
                </div>
                <span slot="title">{{item.name}}</span>
            </el-menu-item>
        </el-menu>
    </div>

第三步，导航数据处理

  data(){
            return{
                leftNavData:[
                    {path:'/Main/Home',iconName:'el-icon-house',name:'首页'},
                    {path:'/Main/Order',iconName:'el-icon-document',name:'订单'},
                    {path:'/Main/Goods',iconName:'el-icon-shopping-bag-1',name:'商品'},
                    {path:'/Main/Money',iconName:'el-icon-bank-card',name:'资金'},
                    {path:'/Main/Promotion',iconName:'el-icon-present',name:'促销'},
                    {path:'/Main/Notice',iconName:'el-icon-chat-dot-round',name:'通知'},
                ]
            }
        },

第四步，点击导航，将数据存入vuex中，用于渲染面包屑

import {mapActions} from 'vuex'//引入vuex

   methods: {
            ...mapActions(['routerFun']),
            getRouter(path,name) {
                let obj = {path,name}
                this.routerFun(obj)//调用vuex中的方法
            }
        }

第五步，在vuex中处理获得的数据

const state ={
    myRouter:[
        {path:'/Main/Home',iconName:'el-icon-house',name:'首页'},//默认首页
    ]
};
const actions={
    routerFun({commit},obj){//得到页面传入的数据
       commit('pushRouter',obj)
    }
};
const mutations ={
pushRouter(state,obj){
        if(obj.name !== '首页'){
            if(state.myRouter.length <=1){//判断长度
                state.myRouter.push(obj)
            }else if(state.myRouter.length ===2){
                state.myRouter.splice(1,1,obj)
            }
        }else {
            state.myRouter.splice(1,1)
        }
        let myRouter = JSON.stringify(state.myRouter)
        sessionStorage.setItem('myRouter',myRouter)//存入本地是为了解决刷新的问题，在第七步会使用到
    }

第六步，在页面引入面包屑组件

<el-breadcrumb separator-class="el-icon-arrow-right">
     <el-breadcrumb-item v-for="item in breadList" :to="{path:item.path}" :key="item.name" @click.native="getRouter(item.path,item.name)">{{item.name}}</el-breadcrumb-item>
</el-breadcrumb>

第七步，获取渲染面包屑需要的数据，采用计算属性，动态获取

  computed:{
            breadList(){
                let dataArr = []
                if(this.$store.state.getRouter.myRouter.length !==1){
                    dataArr = this.$store.state.getRouter.myRouter
                }else {
                    dataArr = JSON.parse(sessionStorage.getItem('myRouter'))
                }
                return dataArr
            }

        },

第八步，重复第四步的内容，整个流程就基本处理完了。
需要注意的是在面包屑组件中使用click事件需要这样引用

@click.native="getRouter(item.path,item.name)"