面包屑

用任意插件均可

插件使用代码

使用watch监听路由

<!-- 以element面包屑为例 -->

<el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
    <el-breadcrumb-item v-for="(im, ix) in routelist" :key="ix" :to="{ path: handlerpath(im)}">{{im.meta.title}}</el-breadcrumb-item>
</el-breadcrumb>

<!-- handlerpath 处理面包屑路径不全的问题 -->

$route(to, from){
 	this.routelist = []
    if(to.name == '详情页面'){
        this.routelist.push(from)
        this.routelist.push(to)
    }else{
        this.routelist.unshift(to)
    }
}	

// this.routelist  为插件使用数据


// 返回是路径的问题解决

// 定义方法 在组件中调用

handlerpath(val){
    let a,b
    Object.keys(val.query).forEach((im,ix) => {
        a = im
        b = val.query[a]
    })
    return val.path + '?' + a + '=' + b
}