前言

提示：这次做一个面包屑 的笔记

element UI 官网，面包屑
链接: https://element.eleme.cn/#/zh-CN/component/breadcrumb

提示：前提须知

前提须知

面包屑的功能结合Aside侧边栏的路由变化，在Header头部相应的面包屑会动态更新，如点击用户管理

这样的功能需要结合组件Aside.vue和Header.vue一起动态变化

router文件index.js文件的路由跳转

Aside.vue组件的路由挂载

前提： 在 标签添加 routre的属性

对菜单的index属性绑定
提示： 这里的index绑定的路径与上面的touter/index.js设置的path路径保持一致

一、引入

1.安装vuex的插件

vue项目下的控制台输入指令，@之后可自行指定版本安装
提示： vue2使用vuex3.x的版本，4.0以上的会出错误

npm i -S vuex@3.6.2 

2.创建一个Header.vue文件，引入

3.vue项目src项目下

创建store包，创建index.js

store文件下的index.js文件粘贴以下代码

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store( {
    state: {
        currentPathName: ''
    },
    mutations: {
        setPath(state) {
            state.currentPathName = localStorage.getItem("currentPathName")
        }
    }
})

export default store

4.在main.js里面引入store

//引入导包
import store from './store'

引入

5.在router文件下的index.js下引入导包

//导包引入
import store from "@/store";


//并在下方粘贴以下代码
//路由守卫
router.beforeEach((to,from,next) => {
    localStorage.setItem("currentPathName",to.name)  // 设置当前路由的名称,为了在Header组件中去使用
    store.commit("setPath")  //触发store的数据更新
    next()  //路由放行
})

示例

6.在Header.vue的文件下添加以下代码

示例

代码如示：

  /*面包屑功能的开始*/
  computed: {
      currentPathName() {
        return this.$store.state.currentPathName; //需要监听的数据
      }
  },
  watch: {  //百度搜索，监听路由的变化
    currentPathName(newVal,oldVal) {
      console.log(newVal)
    }
  }
  /*面包屑结束*/

7.使用

二、运行vue项目即可(npm run serve)

三处依次的渲染

总结

面包屑针对的是侧边栏菜单的变化和右边的区域的动态变化结合，需要注意的是vuex的版本，vue2的要导入vuex4.0以下的版本。如果不小心导错，可以在vue项目中的两个文件下删除