文章目录
前言
提示:这次做一个面包屑 的笔记
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项目中的两个文件下删除