Vue如何让el-breadcrumb面包屑导航栏根据路由跳转地址动态切换标题内容

Vue如何让el-breadcrumb面包屑导航栏根据路由跳转地址动态切换标题内容

废话少说，先上效果图

其实想要实现图片上的效果非常简单，我们直接使用路由元信息即可解决，关于路由元信息的解答vue-router上面的开发文档写的非常详细，大家可以自行了解下，下面说代码

我们只需在配置的路由信息下加入一个meta字段，写上你想要插入面包屑导航栏标题中的内容
之后我们只需在面包屑导航栏中写如下代码

{{$route.meta.title}}

这样，面包屑导航中就会出现不同路由地址对应的不同标题内容啦！
但是做到这里其实还有一点就是
el-breadcrumb中有两种属性 separator和separator-class，这两种其实都是用来实现上面的分隔线的，默认情况下分隔线是/，但是会出现以下效果

大家可以看到按理说回归首页的时候就不该有这个分隔线了，太丑了有没有！
所以我想了很多办法去控制separator的显示内容想要实现效果（由于separator中的值只能为String类型），无论是局部刷新还是通过监听路由变化信息去更改对应的值都没有什么好的效果
所以我另辟蹊径，在breadcrumb中，如果只有一个元素是不会出现分隔符，而这里由于我用了v-show去控制后面子菜单的显隐，编译过来其实就是display:none，所以他本身还是有个这个元素的，只是不显示，那么分隔符自然就还会在，所以只需要改成v-if，也就是当我当前路径在根路径或是/page1路径的时候，我选择销毁breadcrumb中的其他元素，只留首页一项，而当路由地址不是根路径的时候再重新创建，这样分隔符就出来了

<el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item v-show="showBread">{{$route.meta.title}}		  </el-breadcrumb-item>
            <el-breadcrumb-item v-show="showBread">{{$route.meta.title}}</el-breadcrumb-item>
</el-breadcrumb>

，监听路由的方法，

watch: {
    '$route' (to, from) {
      
      if (to.path !== '/' && to.path !== '/page1') {
        this.showBread = true
        console.log(this.showseparator)
      } else {
        this.showBread = false
        this.showseparator = 'HEY'
        console.log(this.showseparator)
      }
    }
  }

这样，就可以了，但是记住关键的一点，由于我这里使用的是el-tag打开子页面，而这里只是一个监听路由变化的方法，如果路由不变化，即我们在当前页面刷新后，这个监听效果是不起作用的，所以再mounted中还要加入判断，跟如上代码是一样的

代码写到这里就OK啦，希望给我们一起共同学习，共同进步，上面的代码有不足之处或是有更简洁更高效的方法可以实现，还望大佬可以不吝赐教！

标签：el,Vue,route,breadcrumb,meta,跳转,面包屑,路由
来源： https://blog.csdn.net/RoonaTh/article/details/110079536