vue 面包屑导航组件封装_vue.js_

面包屑导航可以将浏览过的页面记录下来，方便很快速的跳转回某一个页面，本文介绍了几种自己封装面包屑组件的方式。

一、为什么需要面包屑？

当网页进行了多次跳转后，用户可能早就已经晕头转向了。作为程序猿的我们可能通过地址栏参数还可以分清楚当前处于哪一个位置，终归网页是要展示给用户。用户来使用的话，没有面包屑导航的话，可能就对网页产生了抵触心理，使用面包屑导航将每次跳转的页面记录下来，可以很好解决这一问题。

二、初级封装

1. 实现思路

• 准备页面结构和样式,需要用到字体图标 在public目录下的index.html中引入cdn的字体图标资源

• 将需要外部传入的值定义为自定义属性
• 将外部写在标签内部的内容放置在默认插槽中

2. 代码演示

在src/components目录下新建bread-crumbs.vue文件，公用的组件放在这个目录下统一管理，文件名可自定义。

代码如下（示例）：

在src/components目录下新建index.js文件，将封装好的全局组件进行注册

import BreadCrumbs from './bread-crumbs' export default { install (app) { app.component(BreadCrumbs.name, BreadCrumbs) } }

在main.js中注册为插件

import { createApp } from 'vue' import App from './App.vue' import router from './router' import store from './store' // 导入并注册 import myUI from './components' createApp(App).use(store).use(router).use(myUI).mount('#app')

3. 使用

传入公共组件需要的值 代码如下（示例）：

4. 不足

只能满足基本需求，超过二级导航后就无法使用。

三、进阶封装

1. 实现思路

• 参考elementUI面包屑组件代码

首页活动管理活动列表活动详情

• 将每一个导航封装为一个组件

2. 代码演示

在上一步封装的基础上继续改进代码

代码如下（示例）： 在src/component目录下新建bread-crumbs-item组件，文件名可以自定义。

还是在src/components目录下的index.js中注册为全局组件

import BreadCrumbs from './bread-crumbs' import BreadCrumbsItem from './bread-crumbs-item' export default { install (app) { app.component(BreadCrumbs.name, BreadCrumbs) app.component(BreadCrumbsItem .name, BreadCrumbsItem ) } }

修改BreadCrumbs.vue中代码，将导航的每一项放置在默认插槽中

3. 使用

使用的时候，有多少个二级导航就使用几个BreadCrumbsItem 代码如下（示例）：

4. 不足

在最后一个导航后面会有多余的一个>指示标识

四、高阶封装

1. 思路

• 终极版，使用render函数自己进行拼接创建。 createElement renderrender选项与h函数

• 指定组件显示的内容：new Vue({选项})

  • el 选项，通过一个选择器找到容器，容器内容就是组件内容
  • template 选项，
    组件内容
    作为组件内容
  • render选项，它是一个函数，函数回默认传人createElement的函数（h），这个函数用来创建结构，再render函数返回渲染为组件内容。它的优先级更高。

2. 代码演示

修改BreadCurmbsItem组件内的代码

修改BreadCrumbs.vue中的代码

代码示例(如下)：

3. 使用

这个方式封装后，让全局组件的复用性更强了，强烈推荐使用

可以看到这样封装后，咱们自己封装的面包屑导航已经支持多级导航了。而且最后一个导航后面的>指示标识也没有了。

到此这篇关于vue 面包屑导航组件封装的文章就介绍到这了,更多相关vue 面包屑导航内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！