一、面包屑方案

1.核心：根据url生成面包屑数据动态渲染

2.生成数据规则：

（1）获取route.matched（匹配到的路由记录）

a.使用watch，组件创建时立马触发

b.监听route，改变时获取最新的面包屑数据

（2）根据meta.title和meta.icon来过滤要显示的菜单
  1. <script setup>
  2. import { watch, ref } from 'vue'
  3. import { useRoute } from 'vue-router'
  4. const route = useRoute()
  5. const breadcrumData = ref([])
  6. function generateData(routes) {
  7.   return routes.filter((item) => item.meta.title && item.meta.icon)
  8. }
  9. // 监听route变化,生成新面包屑数据
  10. watch(
  11.   route,
  12.   () => {
  13.     breadcrumData.value = generateData(route.matched)
  14.     console.log(breadcrumData.value, 'breadcrumData.value')
  15.   },
  16.   {
  17.     immediate: true
  18.   }
  19. )
  20. </script>

二、方案步骤

1.创建面包屑组件

2.计算面包屑结构数据

一般面包屑最后一项不可点击

3.动态渲染面包屑

  1. <template>
  2.   <el-breadcrumb class="breadcrumb" separator="/">
  3.     <el-breadcrumb-item
  4.       :to="{ path: item.path }"
  5.       v-for="(item, index) in breadcrumData"
  6.       :key="item.path"
  7.     >
  8.       <span
  9.         :class="[
  10.           index === breadcrumData.length - 1 ? 'no-rederict' : 'rederict'
  11.         ]"
  12.         >{{ item.meta.title }}</span
  13.       >
  14.     </el-breadcrumb-item>
  15.   </el-breadcrumb>
  16. </template>
  18. <script setup>
  19. import { watch, ref } from 'vue'
  20. import { useRoute } from 'vue-router'
  21. import { useStore } from 'vuex'
  22. const route = useRoute()
  23. const breadcrumData = ref([])
  24. function generateData(routes) {
  25.   return routes.filter((item) => item.meta.title && item.meta.icon)
  26. }
  27. // 监听route变化,生成新面包屑数据
  28. watch(
  29.   route,
  30.   () => {
  31.     breadcrumData.value = generateData(route.matched)
  32.   },
  33.   {
  34.     immediate: true
  35.   }
  36. )
  37. // 获取主题颜色
  38. const store = useStore()
  39. const menuBgColor = ref(store.getters.cssVariables.menuBg)
  40. </script>
  42. <style lang="scss" scoped>
  43. .breadcrumb {
  44.   margin-left: 8px;
  45.   display: inline-block;
  46.   line-height: 50px;
  47.   font-size: 14px;
  48.   .rederict {
  49.     color: #666;
  50.     cursor: pointer;
  51.   }
  52.   .rederict:hover {
  53.     color: v-bind(menuBgColor);
  54.   }
  55.   ::v-deep .no-rederict {
  56.     color: #97a8be;
  57.     cursor: text;
  58.   }
  59. }
  60. </style>

三、Transition和过度class

1.当插入或删除包含在 transition 组件中的元素时，vue会添加过度类名，检测触发js钩子函数

image.png

2.过度class用法

（1）-acitve类名可以为进入和离开动画设置不同的持续时间和动画函数

（2）enter-from 和 leave-to用来设置插入和删除时的样式
  1. /* 可以为进入和离开动画设置不同的持续时间和动画函数 */
  2. .slide-fade-enter-active {
  3.   transition: all 0.3s ease-out;
  4. }
  6. .slide-fade-leave-active {
  7.   transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
  8. }
  10. .slide-fade-enter-from,
  11. .slide-fade-leave-to {
  12.   transform: translateX(20px);
  13.   opacity: 0;
  14. }