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}
}
<!--其它代码-->