iview 结合左侧导航实现breadcrumb面包屑案例

红红521 2018-08-03 02:48:16

点击左边导航实现面包屑的案例，求案例

...全文

358 回复打赏收藏转发到动态举报

写回复

回复

切换为时间正序

请发表友善的回复…

发表回复

主要介绍了详解基于iview-ui的导航栏路径（面包屑）配置,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

先给大家看一下实现的效果：我使用的实现方法需要自己手动配置每一个页面的面包屑所对应的路由。首先我们在index.js中配置好每一个页面所对应的名称和路由。自己配置的内容在属性meta中，name中配置的就是我们所显示的面包屑的名称，path是每一个名称所对应的路由。然后是面包屑组件Breadcrumb.vue所对应的代码，使用了计算属性computed来得到名称所对应的...

本案例是基于Vuex的公共数据库，你在了解本案例之前要了解Vuex的使用方法。https://www.iviewui.com/components/breadcrumb打开网址我们可以知道这个组件的面包屑导航是基于路由跳转的。但是我们项目中常常用到单页面查询面包屑导航。小生开始为这个纠结好久。然后和小伙伴一起研究出来一套单页面不用路由跳转的使用方法。先看看效果图1，首次进来2，查询结果3，再次点击...

1、配置路由 { path: '/list', meta: [{ title: 列表'}], name: 'MinePicture', component: () => import('../views/lists/list.vue'), }, { path: '/list/detail/:id', meta: [{ title: '列表',url:'/list' }, { title: '详情'}], name: 'pictureDetail', componen

把面包屑组件放到router-view前即可这样每个页面都可访问到这个组件并且是动态生成；给每个路由添加元信息meta ,定义属性title（面包屑的名称）监听route ，可以拿到meta的信息，放到数组中遍历面包屑。说明：根据不同的页面动态生成不同的面包屑导航。（不用在每个页面写死面包屑）自定义组件Bread.vue。

87,997

社区成员

224,709

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章