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'])
    },
  }

返回步骤六：使用

全局注册，直接使用。