vue动态面包屑导航,
这篇文章主要为大家详细介绍了某视频剪辑软件元素实现动态面包屑，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件元素实现动态面包屑的具体代码，供大家参考，具体内容如下
引言
后台管理系统中，经常会出现需要面包屑的情况，但是又不想每个页面都实现一个，这样不方便维护，因此封装了面包屑组件，方便在页面使用
封装组件
！- Breadcrumb/index.vue -
模板
差异
el-breadcrumb class=breadcrumb 分隔符=/
过渡组名称=面包屑
el-breadcrumb-item v-for=(item，index)in bread list :key= item。路径
跨度
v-if=
项目。重定向===$路由。path index==面包列表。长度-1
{{ item.meta.title }}
/span
一个v-else @ click。prevent= handle link(item) { { item。meta。title } }/a
/el-breadcrumb-item
/过渡-组
/el-breadcrumb
/div
/模板
脚本语言
从“Vue”导入Vue
导出默认Vue.extend({
data () {
返回{
//路由集合
面包清单：[]作为任何[]
};
},
方法：{
//判断是否包含首页路由
仪表板(路由：{ name: string }) {
常量名称=路径路径名称
如果(!名称){
返回错误的
}
返回route.name===仪表板
},
//面包屑跳转
句柄链接(项目：{ redirect:any；path: any }) {
const {重定向，路径}=item
重定向？这个10.99 $ router . push(重定向) :这个10.99 $ router . push(路径);
},
//判断当前面包屑
init () {
这个。面包列表=[]；
这个$路线。匹配。foreach((item)={
if (item.meta.title) {
这个。面包清单。推(项)；
}
});
如果(!这个。是仪表板(这个。面包列表[0]){
this.breadList.unshift({
路径："/仪表板/索引",
元：{标题： 首页 }
});
}
}
},
已创建(){
这个。init()；
},
//当组件放在总布局组件中，需要监听路由变化
观察：{
$route () {
这个。init()；
}
}
});
/脚本
style lang=less 范围。面包屑-输入-激活，面包屑-保持活动{
过渡：全0.5s
}。面包屑-输入，面包屑-保持活动{
不透明度：0;
transform:平移x(20px)；
}。面包屑-移动{
过渡：全0.5s
}。面包屑-保持活动{
位置：绝对；
}
/风格
页面使用
模板
差异
我的面包屑/我的面包屑
四
/div
/模板
脚本语言
从“Vue”导入Vue
从" @/组件/面包屑/索引。vue "导入我的面包屑
导出默认Vue.extend({
组件：{
我的面包屑
}
});
/脚本
样式范围
/风格
路由文件参考
//router/index.ts
从“Vue”导入Vue
从" vue路由器"导入武鲁特
从" @/views/login/index.vue "导入登录；
从" @/layout/index.vue "导入布局；
vue。使用(vue路由器)；
/**
*隐藏表示是否需要在侧边导航栏出现，真的表示不需要
* isFirst表示是否只有一级权限，只出现在只有一个子集，没有其他孙子集
* 当权限拥有多个子集或者孙子集，一级权限需要加上自指的
* 二级权限拥有子集，也必须有自指的
*/
//基础路由
出口常量constantRoutes=[
{
路径："/重定向"，
组件：布局，
隐藏：真实，
儿童：[
{
路径："/redirect/:路径(。*),
component:()=import( @/views/redirect/index)。vue’)
}
]
},
{
路径："/",
重定向："/仪表板",
隐藏：真
},
{
路径："/登录"，
名称：登录，
组件：登录，
隐藏：真
},
{
路径："/仪表板",
组件：布局，
重定向："/仪表板/索引",
isFirst: true，
儿童：[
{
路径："索引",
名称："仪表板",
组件：()=导入( @/视图/仪表板/索引)。vue’)，
元：{
标题： 首页，
图标：“el图标位置"
}
}
]
}
];
//动态路由
导出常量异步路由=[
{
路径："/form "，
组件：布局，
重定向："/表单/索引"，
isFirst: true，
儿童：[
{
路径："索引",
名称：表单，
组件：()=import( @/views/form/index)。vue’)，
元：{
标题： 表单，
角色："表单",
图标：“el图标位置"
}
}
]
},
{
路径："/编辑器",
组件：布局，
重定向："/编辑器/索引",
元：{
角色："编辑",
标题： 总富文本，
图标：“el图标位置"
},
儿童：[
{
路径："索引",
姓名：编辑，
组件：()=import( @/views/editor/index)。vue’)，
元：{
标题： 富文本，
角色："编辑",
图标：“el图标位置"
}
},
{
路径："两个",
姓名：二，
重定向："/编辑/二/三"，
组件：()=import( @/views/editor/two)。vue’)，
元：{
标题： 二级导航，
角色：二，
图标：“el图标位置"
},
儿童：[
{
路径："三",
姓名：三，
component:()=import( @/views/editor/three)。vue’)，
元：{
标题： 三级导航，
角色：三，
图标：“el图标位置"
}
},
{
路径："四个",
姓名：四，
component:()=import( @/views/editor/four)。vue’)，
元：{
标题： 三级导航2,
角色：四，
图标：“el图标位置"
}
}
]
}
]
},
{
路径："/树"，
组件：布局，
重定向："/树/索引"，
isFirst: true，
儿童：[
{
路径："索引",
名称："树",
component:()=import( @/views/tree/index)。vue’)，
元：{
标题： 树状图，
角色："树",
图标：“el图标位置"
}
}
]
},
{
路径："/excel "，
组件：布局，
重定向："/excel/index "，
isFirst: true，
儿童：[
{
路径："索引",
名称：“Excel”，
组件：()=import( @/views/excel/index。vue’)，
元：{
标题： 导入导出，
角色：“excel”，
图标：“el图标位置"
}
}
]
}
];
//出错跳转的路由
导出常量错误=[
//404
{
路径："/404",
component:()=import( @/views/error/index)。vue’)，
隐藏：真
},
{
路径："*",
重定向："/404",
隐藏：真
}
];
const createRouter=()=
新的VueRouter({
scrollBehavior: ()=({
x: 0，
y: 0
}),
路线：constantRoutes
});
const路由器=create router()；
//刷新路由
导出函数resetRouter () {
const new router=create router()；
（任何路由器)。matcher=(newRouter as any).制榫机
}
导出默认路由器；
参考网上资料进行封装修改，具体需求可根据项目修改
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。