Vue监听router实现面包屑导航

更新面包屑屑导航是在改变路由的时候，因此我们监听路由，当路由改变时更新面包屑导航数组

1.首先我们要配置路由对应的页面标题

如下

代码语言：javascript复制

{
    meta:{title:'后台首页'},
    component:'index/index'
},
{
    meta:{title:'商品列表'},
    component:"shop/goods/list"
},

我们这里对router进行了二次封装，实现了通过compoent自动生成path和name

2.接下来我们监听路由并在路由变化时打印信息

代码语言：javascript复制

...
watch:{
    '$route'(to,from){
     return  console.log(this.$route.matched)
},
...

我们需要path、name、meta.title

我们在methods定义设置面包屑函数,这个函数将在路由发生改变时执行

代码语言：javascript复制

watch:{
'$route'(to,from){
    //监听路由变化设置面包屑
     this.getRouterBran()
} 
},

代码语言：javascript复制

 //获取面包屑
getRouterBran(){
    //获取路由记录
    let b = this.$route.matched.filter(v=>v.name)
    let arr = []
    b.forEach((v,k)=>{
        if(v.name=='index' || v.name=='layout')return
        arr.push({
            name:v.name,
            path:v.path,
            title:v.meta.title
        })
    })
    if(arr.length > 0){
        //面包屑前面追加首页
        arr.unshift({name:'index',path:'/index',title:'后台首页'})

    }
    this.bran = arr
},

函数中我们过滤了没有name值的路由（name值用于路由跳转）并且排除了index和layout这个两个路由对应的页面是不需要面包屑的

3.面包屑导航渲染

代码语言：javascript复制

<!-- 面包屑 -->
<div v-if="bran.length > 0" class="bg-white border-bottom mb-3 " style="padding:20px;margin: -20px;">
    <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item v-for="item,index in bran" :key="index" :to="{ path: item.path }">{{item.title}}</el-breadcrumb-item>

    </el-breadcrumb>
</div>

layout methods path router title

0 人点赞