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