根据id查找树形架构内的组织路径(自上到下),更新面包屑

//入参为数组化组织架构,获得所有上级部门,node为完整架构

function getNode(nodes, path = []) {

if (!nodes) return [];

for (const data of nodes) {

path.push(data);

//无props.departmentID,面包屑展示根部门

if (!props.departmentID) {

return path;

}

if (data.id === props.departmentID) {

return path;

}

if (data.children && data.children.length > 0) {

const findChildren = getNode(data.children, path);

if (findChildren.length) return findChildren;

}

path.pop();

}

return [];

}

//监听传入的ID

watch(() => props.departmentID, () => {

crumb.crumbArr = getNode([wholeStructure])

})

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,下面我来详细介绍一下实现同一个菜单下的二级页面提供面包屑进行路径跟踪及返回,路径上的页面需要记录状态的具体步骤。 1. 配置路由 首先需要配置路由,将同一个菜单下的二级页面的路由规则定义好,例如: ```javascript { path: '/menu1', component: Menu1, children: [ { path: 'page1', component: Page1 }, { path: 'page2', component: Page2 } ] } ``` 在路由配置中,每个页面都有一个对应的路径,当用户访问该路径时,就会渲染对应的组件。在本例中,/menu1是菜单的路径,/menu1/page1和/menu1/page2是该菜单下的二级页面的路径。需要注意的是,使用路由时,不要忘记在根组件中添加<router-view>组件,用于渲染路由组件。 2. 实现面包屑导航 在每个页面中,可以使用<router-link>组件实现面包屑导航。例如,在Page2组件中,可以这样实现面包屑导航: ```html <template> <div> <router-link to="/menu1">菜单</router-link> / <span>页面2</span> </div> <!-- 页面内容 --> </template> ``` 在上述代码中,<router-link>组件表示一个链接,to属性指定链接的路径,内容为链接的文字。需要注意的是,/menu1是菜单的路径,而不是页面的路径,所以在面包屑导航中只需要显示菜单的名称即可。 3. 记录页面状态 为了记录页面状态,可以使用Vuex或组件的data属性来存储状态。在本例中,可以使用Page2组件的data属性来存储状态,例如: ```javascript export default { data() { return { status: { // 状态数据 } } } } ``` 在上述代码中,status属性用于存储页面的状态数据。需要根据具体需求来确定状态数据的类型和数量。 4. 实现返回按钮 在每个页面中,可以使用<router-link>组件实现返回按钮。例如,在Page2组件中,可以这样实现返回按钮: ```html <template> <div> <router-link to="/menu1">菜单</router-link> / <span>页面2</span> <button @click="goBack">返回</button> </div> <!-- 页面内容 --> </template> <script> export default { methods: { goBack() { // 返回上一页 this.$router.go(-1); } } } </script> ``` 在上述代码中,<button>元素表示一个按钮,@click属性指定了按钮点击时触发的方法。goBack方法使用this.$router.go(-1)返回上一页。需要注意的是,返回按钮只能返回上一页,如果需要返回其他页面,需要使用<router-link>组件实现。 通过以上步骤,就可以实现同一个菜单下的二级页面提供面包屑进行路径跟踪及返回,路径上的页面需要记录状态的功能。需要注意的是,在实现过程中,需要根据具体需求来确定每个页面的状态数据类型和数量,避免数据冗余和浪费。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值