广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue.js实现动态面包屑
  • 251
分享到

vue.js实现动态面包屑

vue.js面包屑 2022-11-13 05:11:28 251人浏览 独家记忆
摘要

最近在学习Vue,正好手上有个项目还是用Jquery写的,就自己尝试将这个项目的前端用vue实现,途中遇到了动态面包屑的问题,特此记录一下,如有不对的地方,欢迎指正. 需求描述: 点

最近在学习Vue,正好手上有个项目还是用Jquery写的,就自己尝试将这个项目的前端用vue实现,途中遇到了动态面包屑的问题,特此记录一下,如有不对的地方,欢迎指正.

需求描述:

点击左侧的导航,跳转到不同的页面,并且根据导航的路径,动态生成面包屑.面包屑的数据均来自于左侧的导航.

思路:

1.面包屑作为一个单独的组件,在页面中引入.页面的结构如下:

<template>
    <div class="page-center">
        <top-bar></top-bar> <!--页面顶部信息,固定在顶部-->
        <div class="WEBui-menu-vertical left-nav"  v-bind:style="{ width:colspan?'100px':'220px' }">
            <menu-vertical
                :menu-list="menuList"
                @flexMenuClick="flexMenuClick"
                @menuClick="menuClick"></menu-vertical>
        </div> <!--左侧菜单导航,点击这边的菜单,右边的面包屑变化-->
        <div class="right-content"  v-bind:style="{ marginLeft: colspan?'100px':'220px' }">
            <bread-crumb></bread-crumb> <!--面包屑组件-->
            <div class="content">
                <router-view></router-view> <!--路由页面-->
            </div>
            
        </div>
        
    </div>
</template>

2.面包屑组件的实现:

<!--主要代码实现,样式自己DIY-->
<template>
    <div class="bread-crumb">
        <ul>
            <li v-for=" (item, index) in breadCrumbList" :key="item.title">
                <router-link>{{item.title}}</router-link>
                <span v-if="index < breadCrumbList.length-1">/</span>
            </li>
        </ul>
    </div>
</template>
 
<script>
 
export default {
    name:'bread-crumb',
    computed: {
      breadCrumbList() { //将面包屑的数据存储在vuex状态中
          return this.$store.state.breadCrumbList
      }
    },
}
</script>

3.每次路由更新的时候,更新面包屑的数据:

//main.js
router.beforeEach( (to, from, next) => { //这里用到导航守卫
  store.commit('setCurrRouteNme', {currRouteNme:to.name});
  store.dispatch('setMenuList').then( ()=> { //因为面包屑的数据来自左侧菜单,这边先获取左侧导航数据然后根据当前路径生成面包屑
    store.dispatch('setBreadCrumb');
  });
 
  next();
}) 
//store.js
import Vue from 'vue'
import Vuex from 'vuex'
import axiOS from 'axios'
 
Vue.use(Vuex)
 
export default new Vuex.Store({
  state: {
    currRouteNme: String,
    oriMenuList:Array,
    menuList:Array,
    breadCrumbList:Array,
  },
 
  mutations: {
    setCurrRouteNme( state, payload ) {
      state.currRouteNme = payload.currRouteNme
    },
 
    setMenuList( state, payload) {
      state.menuList = payload.menuList
    },
 
    setOriMenuList( state, payload) {
      state.oriMenuList = payload.oriMenuList
    },
 
    setBreadCrumb( state, payload) {
      state.breadCrumbList = payload.breadCrumbList
    },
 
  },
  actions: { //因为数据是异步请求获取的,所以改变state要通过dispatch,commit只能处理同步数据
    setMenuList ( {commit} ) {
      let menuList;
      return new Promise ( (resolve) => {
        axios(url).then( res => { //url是请求菜单数据的接口
          menuList = res.data.authList.map(({id,symbol,pId,forward,resName,isLeaf})=>{
            return {
              id,
              symbol,
              pId,
              forward,
              label:resName,
              isLeaf:isLeaf,
              icon:isLeaf == 1?'':'el-icon-Goods'
            }
          });
 
          commit('setOriMenuList', {
            oriMenuList: menuList
          });
        //这边是为了左侧菜单而进行的数据处理,可忽略
        let menuTree = menuList.reduce(function (prev, item) {
            prev[item.pId] ? prev[item.pId].push(item) : prev[item.pId] = [item];
            return prev;
          }, {});
          
          for (let parentItem in menuTree) {
            menuTree[parentItem].forEach(function (item) {
                item.children = menuTree[item.id] ? menuTree[item.id] : null;
            });
          }
          
          commit('setMenuList', {
            menuList: menuTree[0]
          }); 
 
          resolve();
        })
      })
  
    },
 
    setBreadCrumb ( {commit, state} ) {
 
      let currMenuList = state.oriMenuList;
      let currMenu;
      let breadCrumbPre = [];
  
      for (let i=0; i<currMenuList.length; i++) {
          if(currMenuList[i]['symbol'] == state.currRouteNme){
            currMenu = currMenuList[i];
              let breadCrumbItem = {};
              breadCrumbItem.title = currMenuList[i].label;
              breadCrumbItem.path = '';
              breadCrumbPre.unshift(breadCrumbItem);
          }
      }
      function setBreadCrumb(menu){ //递归找出当前菜单的所有父亲菜单
          if(menu.pId != 0){
              for (let i=0; i<currMenuList.length; i++) {
                if(currMenuList[i]['id'] == menu.pId){
                  let breadCrumbItem = {};
                  breadCrumbItem.title = currMenuList[i]['label'];
                  breadCrumbItem.path = '';
                  breadCrumbPre.unshift(breadCrumbItem);
                  setBreadCrumb(currMenuList[i])
                }
              }
          }
      }
      setBreadCrumb(currMenu);
      let index = {
          title:'首页',
          path:''
      };
      breadCrumbPre.unshift(index);
      commit('setBreadCrumb', {
        breadCrumbList:breadCrumbPre
      })
    }
 
  }
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

--结束END--

本文标题: vue.js实现动态面包屑

本文链接: https://www.lsjlt.com/news/145827.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • vue.js实现动态面包屑
    最近在学习vue,正好手上有个项目还是用jquery写的,就自己尝试将这个项目的前端用vue实现,途中遇到了动态面包屑的问题,特此记录一下,如有不对的地方,欢迎指正. 需求描述: 点...
    99+
    2022-11-13
    vue.js 面包屑
  • vue.js怎么实现动态面包屑
    本篇内容介绍了“vue.js怎么实现动态面包屑”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!需求描述:点击左侧的导航,跳转到不同的页面,并且...
    99+
    2023-06-30
  • vue+elementUI实现动态面包屑
    本文实例为大家分享了vue+elementUI实现动态面包屑的具体代码,供大家参考,具体内容如下 引言 后台管理系统中,经常会出现需要面包屑的情况,但是又不想每个页面都实现一个,这样...
    99+
    2022-11-13
    vue elementUI 面包屑
  • vue实现动态面包屑导航
    本文实例为大家分享了vue实现动态面包屑导航的具体代码,供大家参考,具体内容如下 动态面包屑导航是根据路由中的matched获取到的单独提取出面包屑导航栏组件 <templat...
    99+
    2022-11-13
    vue动态面包屑导航 vue面包屑导航 vue动态导航
  • element动态路由面包屑的实现示例
    要掌握:localStorage,组件封装​ emm,第一次上传视频转gif的图片,效果不咋好。。。 视频转gif 的软件连接 https://www.jb51.net...
    99+
    2022-11-12
    element动态路由面包屑 element 面包屑
  • vue怎么实现面包屑
    本文小编为大家详细介绍“vue怎么实现面包屑”,内容详细,步骤清晰,细节处理妥当,希望这篇“vue怎么实现面包屑”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。vue中面包屑的实现方法,供大家参考,具体内容如下面包...
    99+
    2023-06-30
  • vue实现面包屑的方法
    vue中面包屑的实现方法,供大家参考,具体内容如下 面包屑是什么: 面包屑是作为辅助和补充的导航方式(secondary navigation scheme),它能让用户知道在网站或...
    99+
    2022-11-13
    vue 面包屑
  • Vue2+element-ui实现面包屑导航
    本文实例为大家分享了Vue2+element-ui实现面包屑导航的具体代码,供大家参考,具体内容如下 1、面包屑导航栏布局 代码: <template>     <...
    99+
    2022-11-13
    Vue2 elemen ui 面包屑导航
  • php怎么实现面包屑导航
    本文操作环境:windows10系统、php 7、thinkpad t480电脑。面包屑导航的作用是告诉访问者它们在网站中的位置以及如何返回。可能很多小伙伴对面包屑导航不太了解,其实它来自于一个童话故事“汉赛尔和格莱特”,当汉赛尔和格莱特穿...
    99+
    2020-02-14
    php 面包屑 导航
  • css如何实现面包屑导航
    这篇文章主要介绍了css如何实现面包屑导航,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。   居中分页   如果要让分页居中,可以在容器...
    99+
    2022-10-19
    css
  • vue项目实现面包屑导航
    本文实例为大家分享了vue项目实现面包屑导航的具体代码,供大家参考,具体内容如下 安装依赖 npm i vuex 创建 tagView.vue <template>  ...
    99+
    2022-11-13
    vue 面包屑导航
  • bootstrap如何动态添加面包屑及其响应事件
    这篇文章给大家分享的是有关bootstrap如何动态添加面包屑及其响应事件的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。具体如下:Bootstrap官网中,只介绍了breadcr...
    99+
    2022-10-19
    bootstrap
  • web开发如何实现面包屑导航
    这篇文章给大家分享的是有关web开发如何实现面包屑导航的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。首先我们来看看面包屑导航的作用:1、让用户了解当前所处位置,以及当前页面在整个...
    99+
    2022-10-19
    web开发
  • vue项目怎么实现面包屑导航
    这篇文章主要介绍“vue项目怎么实现面包屑导航”,在日常操作中,相信很多人在vue项目怎么实现面包屑导航问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”vue项目怎么实现面包屑导航”的疑惑有所帮助!接下来,请跟...
    99+
    2023-06-30
  • vue3中使用ant-design-vue的layout组件实现动态导航栏和面包屑功能
    目录0 前言1 准备工作1.1 安装ant-design-vue1.2 安装图标组件包2 选择组件3 路由文件4 Vue导航页面5 最终效果0 前言   &nbs...
    99+
    2023-01-29
    vue3使用ant-design-vue实现动态导航栏 vue3使用ant-design-vue
  • 基于vue-router的matched实现面包屑功能
    本文主要介绍了基于vue-router的matched实现面包屑功能,分享给大家,具体如下: 如上图所示,就是常见的面包屑效果,面包屑的内容一般来说,具有一定的层级关系,就以上图为...
    99+
    2022-11-12
    vue-router matched面包屑 vue-router 面包屑
  • CSS3如何实现圆形风格面包屑导航
    小编给大家分享一下CSS3如何实现圆形风格面包屑导航,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!<html><...
    99+
    2022-10-19
    css3
  • AngularJS怎么自定义指令实现面包屑功能
    这篇文章主要介绍了AngularJS怎么自定义指令实现面包屑功能,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。具体如下:<!DOCTY...
    99+
    2022-10-19
    angularjs
  • vue3+Typescript实现路由标签页和面包屑功能
    目录在vue中实现路由标签页和面包屑需求分析最终效果实现步骤第一步:创建路由标签组件和面包屑第二步:创建路由标签数组第三步:监听路由变化并自动添加新标签第四步:处理关闭标签事件第五步...
    99+
    2023-05-19
    vue3面包屑 vue3路由标签页
  • 基于WPF实现面包屑效果的示例代码
    WPF 简单实现面包屑 框架使用.NET4 至 .NET6; Visual Studio 2022; 面包屑展示使用控件如下: Button 做首页按钮,当点击时回到首页。...
    99+
    2023-05-17
    WPF实现面包屑效果 WPF面包屑效果 WPF面包屑
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作