2024年Vue + ElementUI 动态生成面包屑导航教程_vue动态面包屑，web开发详解

最后

基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

    breadcrumbList.push({
      name,
      path
    })
  }
})
// 保存面包屑导航数据
this.breadcrumbList = breadcrumbList

}
}

在上面的代码中，我们遍历了当前路由信息，并通过meta.breadcrumb属性来判断当前路由是否需要生成面包屑导航。如果meta.breadcrumb为true，则将当前路由的名称和路径保存到breadcrumbList数组中。


#### 3. 渲染面包屑导航


在Vue组件中，可以通过template属性来定义组件的模板。我们可以使用ElementUI提供的el-breadcrumb组件来渲染面包屑导航。具体实现步骤如下：


1. 使用el-breadcrumb组件来渲染面包屑导航


2. 使用v-for指令遍历breadcrumbList数组，动态生成面包屑导航的每一个项


3. 使用:to属性来指定每一项的链接地址


4. 使用separator-class属性来设置面包屑导航的分隔符样式示例代码如下：

{{ item.name }} ```

在上面的代码中，我们通过v-for指令来遍历breadcrumbList数组，动态生成面包屑导航的每一个项，使用:to属性来指定每一项的链接地址。同时，我们通过separator-class属性来设置面包屑导航的分隔符样式。

4. 调用生成面包屑导航的方法

在Vue组件中，可以通过mounted钩子函数或$route的watch监听来调用生成面包屑导航的方法。具体实现步骤如下：

1. 在mounted钩子函数中调用generateBreadcrumb方法，实现组件初始化时生成面包屑导航的功能

2. 在$route的watch监听中调用generateBreadcrumb方法，实现路由发生变化时动态生成面包屑导航的功能示例代码如下：

mounted() {
  this.generateBreadcrumb()
},
watch: {
  $route() {
    this.generateBreadcrumb()
  }
}

在上面的代码中，我们在组件的mounted钩子函数中和$route的watch监听中调用generateBreadcrumb方法，实现了组件初始化时生成面包屑导航和路由发生变化时动态生成面包屑导航的功能。

完整示例代码

下面是一个完整的示例代码，供参考：

<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="item.path" v-for="(item, index) in breadcrumbList" :key="index">{{ item.name }}</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 其他组件内容 -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      breadcrumbList: []
    }
  },
  methods: {
    generateBreadcrumb() {
      // 获取当前路由信息
      const matched = this.$route.matched
      // 初始化面包屑导航数据
      const breadcrumbList = []
      // 遍历路由信息，生成面包屑导航数据
      matched.forEach(item => {
        const { meta, name, path } = item
        if (meta.breadcrumb) {
          breadcrumbList.push({
            name,
            path
          })
        }
      })
      // 保存面包屑导航数据
      this.breadcrumbList = breadcrumbList
    }
  },
  mounted() {
    this.generateBreadcrumb()
  },
  watch: {
    $route() {
      this.generateBreadcrumb()
    }
  }


## 算法

1. 冒泡排序

2. 选择排序

3. 快速排序

4. 二叉树查找: 最大值、最小值、固定值

5. 二叉树遍历

6. 二叉树的最大深度

7. 给予链表中的任一节点，把它删除掉

8. 链表倒叙

9. 如何判断一个单链表有环

   ![](https://img-blog.csdnimg.cn/img_convert/456c5266f0c812f2429063eb46ff1ed9.webp?x-oss-process=image/format,png)

>由于篇幅限制小编，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！


**[如果你觉得对你有帮助，可以戳这里获取：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**



料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！


**[如果你觉得对你有帮助，可以戳这里获取：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**