Vue动态面包屑导航怎么实现

Question

没有思路，求大神解答

补充一下，我的思路是beforeEach获取上一个路由name和即将进入的路由name，然后填加到数组，最后router-link循环，但是不知道从哪下手

Answer 1

var routeList = []

router.beforeEach((to, from, next) => {
  var index = routeList.indexOf(to.name)
  if (index !== -1) {
    //如果存在路由列表，则把之后的路由都删掉
    routeList.splice(index + 1, routeList.length - index - 1)
  } else {
    routeList.push(to.name)
  }
  to.meta.routeList = routeList
  next()
})

之后在需要用到的页面

beforeRouteEnter(to, from, next) {
  next(vm=>{
    vm.routeList = to.meta.routeList
  })
}

或者在watch里

this.$route.meta.routeList

Answer 2

鉴于需求不明确，提供个Element-UI面包屑的示例吧http://element-cn.eleme.io/#/...

补充：
把不同的路由地址和对应的面包屑数据做一个映射关系储存，然后监听路由的变化，取出映射里面的对应的面包屑数据，渲染出来。

Answer 3

面包屑导航对于 router的父子关系 有要求吗