Vue 之 VueCli3+TypeScript+IviewUI组件库，集成面包屑组件（根据路由菜单改变）

一、版本说明

具体代码开源到github，欢迎star

    "vue": "^2.6.10",
    "vue-class-component": "^7.0.2",
    "vue-property-decorator": "^8.3.0",
    "vue-router": "^3.1.3",
    "vuex": "^3.0.1",
    "vuex-class": "^0.3.2",
    "typescript": "~3.5.3",
    "view-design": "^4.0.2"

 

二、封装面包屑组件

       思路：通过监听当前路由(this.$route)的变化，修改面包屑对应的数据；   

        注：监听Watch对应的"immediate"属性，表示组件一加载就监听（默认是加载后的数据第一次修改时，才执行监听回调）;                  "deep"属性，表示深度监听，如监听某对象obj，对象的每一个属性如obj.name改变时，都会执行监听，所以会相对消耗性能；    建议监听"对象.对象属性"来实现。     

---

2.1、注意，给当前面包屑组件赋值时，使用深拷贝，否则会出现你想不到的问题（亲身经历哈哈）；   组件代码如下哈

参考深拷贝方式如下（当然其他赋值方式）：  a  赋值给 b

• 方法1`：    b = JSON.parse(JSON.stringify(a))
• 方法2`数组赋值：    b = [...a]
• 方法3`对象赋值：    b = {...a}
• 方法4`对象赋值：    b = Object.assign({}, a)

 

三、引入面包屑组件

---

3.1、引入面包屑组件，然后直接使用即可

 

四、效果图

---

---

---

 

总结：

1、封装面包屑组件，分析面包屑是根据路由的变化而变化，所以监听路由this.$route即可

2、引入面包屑组件，直接使用即可

3、具体代码开源到github，欢迎star

4、写给自己的随笔，有问题欢迎指出ψ(*｀ー´)ψ