vue2实现面包屑功能

目录

1. store/index.js

2. router/index.js

3. Header.vue

---

在Vue 2中实现面包屑导航是一种常见的前端实践，它可以帮助用户了解当前页面在网站结构中的位置，并快速导航到上一级或根目录。以下是使用Vue 2实现面包屑导航的基本步骤：

1. store/index.js

state中定义一个面包屑名称：currentPathName

mutations中定义一个方法：

export default new Vuex.Store({
  state: {
    currentPathName: ''
  },
  getters: {
  },
  mutations: {
    setPath (state) {
      state.currentPathName = localStorage.getItem('currentPathName')
    }
  },
  actions: {
  },
  modules: {
  }
})

2. router/index.js

使用路由守卫获取路由名称

router.beforeEach((to, from, next) => {
  // 设置当前的路由名称，为了在Header组件中去使用
  localStorage.setItem('currentPathName', to.name)
  // 触发store的数据更新
  store.commit('setPath')
  // 其他的情况都放行
  next()
})

3. Header.vue

<!--其它代码-->
<el-breadcrumb-item><a href="">{{ currentPathName }}</a></el-breadcrumb-item>
<!--其它代码-->
computed: {
  currentPathName () {
    return this.$store.state.currentPathName
  }
}
<!--其它代码-->