vue2 三级路由 面包屑导航

 routerView.vue文件 用于三级页面跳转

<el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item v-for="item in breList" :key="item.path" :to="{ path: item.path }"><i v-if="item.meta.title=='首页'" class="el-icon-s-home"></i>{{item.meta.title=='首页'" class="el-icon-s-home"></i>{{item.meta.title}}</el-breadcrumb-item>
</el-breadcrumb>
<router-view></router-view>

'$route':{
                deep:true,
                immediate:true,
                handler(n,o){
                    // this.breList = [...n.matched]
                    this.breList = []
                    n.matched.forEach(item=>{
                        if(!item.parent || item.parent.redirect != n.path){                                
                            this.breList.push(item)
                        }
                }
}
    

router.js文件

 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Vue 2 中,可以使用 vue-router 和动态路由来实现同级路由面包屑导航。下面是一个简单的示例: 首先,确保你已经安装了 vue-router。可以使用以下命令进行安装: ``` npm install vue-router ``` 然后,在你的路由配置文件中,设置动态路由,并为每个路由添加一个 `meta` 属性,用于存储面包屑的信息。例如: ```javascript // router.js import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) const routes = [ { path: '/', name: 'Home', component: Home, meta: { breadcrumb: [ { text: 'Home', link: '/' } ] } }, { path: '/about', name: 'About', component: About, meta: { breadcrumb: [ { text: 'Home', link: '/' }, { text: 'About', link: '/about' } ] } }, // 其他路由... ] const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes }) export default router ``` 在上面的示例中,每个路由都有一个 `breadcrumb` 数组,用于存储面包屑的信息。每个面包屑项都包含一个 `text` 属性和一个 `link` 属性,分别表示面包屑显示的文本和跳转链接。 接下来,在你的组件中,可以使用 `this.$route.meta.breadcrumb` 来获取当前路由的面包屑信息。然后,你可以在模板中循环遍历面包屑数组,并渲染面包屑导航。 ```html <!-- App.vue --> <template> <div> <nav> <ul> <li v-for="item in breadcrumb" :key="item.text"> <router-link :to="item.link">{{ item.text }}</router-link> </li> </ul> </nav> <router-view></router-view> </div> </template> <script> export default { computed: { breadcrumb() { return this.$route.meta.breadcrumb } } } </script> ``` 在上面的示例中,我们使用了 `v-for` 指令来循环遍历面包屑数组,并使用 `router-link` 组件来渲染面包屑导航的每个项。 这样,当你在应用中切换路由时,面包屑导航会根据当前路由的 `meta` 属性自动更新。 希望这个示例可以帮助到你实现同级路由面包屑导航。如果还有其他问题,请随时提问。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

xuhang139

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值