vue+vue-router+vuex实现动态面包屑

一、路由固定数据

方式一

步骤一 提取面包屑数据

1、在src文件夹下新建utils文件夹(存放通用辅助文件)
2、在utils文件夹下新建local-data.js(存放本地数据)
3、在local-data.js文件中定义一个对象存放面包屑数据
utils - local-data.js

/*-------------------------router面包屑-start---------------------------------------*/
const routerBreadcrumb = {
  // 内容管理-文章管理
  articleList: {
    list: [
      {name: "内容管理", path: ""},
      {name: "文章管理", path: "/articleList"}
    ]
  },
  articleDetail: {
    list: [
      {name: "内容管理", path: ""},
      {name: "文章管理", path: "/articleList"},
      {name: "编辑", path: "/articleDetail"}
    ]
  },
  // 内容管理-首页管理
  indexList: {
    list: [
      {name: "内容管理", path: ""},
      {name: "首页管理", path: "/indexList"}
    ]
  },  
}
/*-------------------------router面包屑-end---------------------------------*/

export {
    routerBreadcrumb,
    // ...
}

步骤二 将面包屑数据引入路由

router - index.js

import {routerBreadcrumb} from '@/utils/local-data'
// ...
const router = new Router({
  mode: 'history',
  routes: [
    // 文章
    {
      path: '/articleList',
      name: 'articleList',
      component: articleList,
      meta: {
        list: routerBreadcrumb.articleList.list
      }
    },
    {
      path: '/articleDetail',
      name: 'articleDetail',
      component: articleDetail,
      meta: {
        list: routerBreadcrumb.articleDetail.list
      }
    },
    // 首页
    {
      path: '/indexList',
      name: 'indexList',
      component: indexList,
      meta: {
        list: routerBreadcrumb.indexList.list
      }
    },
  ]
})

步骤三 在vuex中定义组件的面包屑数据和改变面包屑数据的方法

store - index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const state = {
  breadcumb: {}, // 面包屑
}
const mutations = {
  // 赋值面包屑
  changeBreadcumb (state, value) {
    state.breadcumb = value
  },
}

export default new Vuex.Store({
  state,
  mutations,
})

步骤四 在路由中将本地面包屑数据赋值给vuex的组件面包屑数据

router - index.js

import store from '@/store'

const router = new Router({
  mode: 'history',
  routes: []
})
router.beforeEach((to, from, next) => {
  if (to.meta.list) {
    let list = to.meta.list
    store.commit('changeBreadcumb', { list })
  }
  next()
})
export default router

步骤五 封装面包屑组件

components - BreadcrumbSelf.vue
html

  <div class="breadcumb">
    <div class="breadcumb-list">
      <div v-for="(item, i) in breadcumb.list" :key="i" class="breadcumb-link" :class="{last: i == breadcumb.list.length -1}">
        <router-link :to="{path: item.path}">{{item.name}}</router-link>
        <span v-if="i < breadcumb.list.length - 1"> &gt; </span>
      </div>
    </div>
  </div>

js

    import { mapState } from 'vuex'
    export default {
      name: "breadcrumb-self",
      computed: {
        ...mapState(['breadcumb'])
      }
    }

css

  @baseColor: #fc9153;
  .breadcumb{
    margin-bottom: 22px;
    .breadcumb-list {
      .breadcumb-link{
        display: inline-block;
        a{
          color: #666;
          font-size: 12px;
        }
        span{
          padding: 0 3px;
        }
        &.last{
          a{
            color: @baseColor
          }
        }
      }
    }
  }

步骤六 使用面包屑组件

这里有两种使用方式，一种是只在一个固定的位置使用面包屑组件，另一种是在每个页面中使用面包屑组件，看设计的方式。如果在多个页面使用的话，全局注册一下即可。

番外 各个详情的返回按钮也可以按上述方式使用

返回步骤一：数据

utils - local-data.js

  articleDetail: {
    back: {name: "返回", path: "/articleList"},
    list: [
      {name: "内容管理", path: ""},
      {name: "文章管理", path: "/articleList"},
      {name: "编辑", path: "/articleDetail"}
    ]
  },
返回步骤二：路由

router - index.js

    {
      path: '/articleDetail',
      name: 'articleDetail',
      component: articleDetail,
      meta: {
        list: routerBreadcrumb.articleDetail.list,
        back: routerBreadcrumb.articleDetail.back,
      }
    },
返回步骤三：vuex

store - index.js

const state = {
  breadcumb: {}, // 面包屑
  back: {},// 返回路径
}
const mutations = {
  // 赋值面包屑
  changeBreadcumb (state, value) {
    state.breadcumb = value
  },
  // 赋值返回按钮
  changeBack (state, value) {
    state.back = value
  },
}
返回步骤四：路由使用方法赋值

router - index.js

import store from '@/store'

const router = new Router({
  mode: 'history',
  routes: []
})
router.beforeEach((to, from, next) => {
  if (to.meta.list) {
    let list = to.meta.list
    store.commit('changeBreadcumb', { list })
  }
  if (to.meta.back) {
    let back = to.meta.back
    store.commit('changeBack', { back })
  }
  next()
})
export default router
返回步骤五：封装返回组件

components - GoBack.vue
html

<div class="go_back">
   <router-link :to="{path: back.back.path}">&lt;&lt;{{back.back.name}}</router-link>
</div>

js

  import { mapState } from 'vuex'
  export default {
    name: "go-back",
    computed: {
      ...mapState(['back'])
    },
  }
返回步骤六：使用

全局注册，直接使用。

二、路由固定数据+非路由动态数据

更加灵活

步骤一 在vuex中定义组件的面包屑数据和改变面包屑数据的方法

store - index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const state = {
  breadcumb: {
    isShow: false,
    list: []
  }, // 面包屑
}
const mutations = {
  // 赋值面包屑
  changeBreadcumb (state, value) {
    state.breadcumb = value
  },
}

export default new Vuex.Store({
  state,
  mutations,
})

步骤二 封装面包屑组件

components - BreadcrumbSelf.vue
html

  <div class="breadcumb" v-show="breadcumb.isShow">
    <div class="breadcumb-list">
      <div v-for="(item, i) in breadcumb.list" :key="i" class="breadcumb-link" :class="{last: i == breadcumb.list.length -1}">
        <router-link :to="{path: item.path}">{{item.name}}</router-link>
        <span v-if="i < breadcumb.list.length - 1"> &gt; </span>
      </div>
    </div>
  </div>

js

    import { mapState } from 'vuex'
    export default {
      name: "breadcrumb-self",
      computed: {
        ...mapState(['breadcumb'])
      }
    }

css

  @baseColor: #fc9153;
  .breadcumb{
     height: 48px;
     line-height: 48px;
    .breadcumb-list {
      .breadcumb-link{
        display: inline-block;
        a{
          color: #666;
          font-size: 12px;
        }
        span{
          padding: 0 3px;
        }
        &.last{
          a{
            color: @baseColor
          }
        }
      }
    }
  }

步骤三 使用面包屑组件

将面包屑组件放在指定位置，在各个组件中填充数据并控制显示，动态数据方法使用如下，在调取接口获取到动态数据后，将参数传递，调用方法。（非动态数据方法同理，不显示面包屑同理）

// 面包屑
setBreadcumb (projectName) {
  let list = [
    {name: "测评模块", path: ""},
    {name: "项目", path: "/measure/project"},
    {name: projectName, path: ""},
  ]
  let isShow = true
  this.$store.commit('changeBreadcumb', { isShow, list })
},

网站导航

网站导航

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

  • vue
    VUE Vue ：数据驱动的M V Vm框架 m ：model（后台提供数据），v ：view（页面），vM（模板...
    wudongyu阅读 5,504评论 0赞 11
  • 享受午餐时光
    终于可以歇会儿，享受一下难得的安静，给我的五脏庙补充一下营养
    人间烟火君阅读 361评论 0赞 1
  • 学习第三天
    今天心得体会 群里大佬真的太多了，发现大家主要都是用干货的套路（不打算做这行所以只能默默的收集大家的干货自己用）印...
    熊猫大哥哥阅读 120评论 0赞 0
  • 今日思考
    今天的日常依然是六点钟早起，七点钟到校，因为今天周三只有两节课，因此走路的步数骤减，但是。脑力活儿一点儿都没有少。...
    窈静姝阅读 282评论 0赞 0

友情链接更多精彩内容