vue 面包屑未将完整路径设置为链接

Question

我正在使用以下内容为我的 Vue 应用程序生成面包屑导航

<template>
  <div>
    <div class="container">
      <q-breadcrumbs>
        <q-breadcrumbs-el v-for="crumb in crumbs" :key="crumb.id" :label="crumb.text"
                          :to="crumb.to"/>
      </q-breadcrumbs>
    </div>
  </div>
</template>

<script>
export default {
  name: 'BreadCrump',
  computed: {
    crumbs: function () {
      const pathArray = this.$route.path.split('/')
      pathArray.shift()
      const breadcrumbs = pathArray.reduce((breadcrumbArray, path, idx) => {
        breadcrumbArray.push({
          path: path,
          to: breadcrumbArray[idx - 1]
            ? '/' + breadcrumbArray[idx - 1].path + '/' + path
            : '/' + path,
          text: path
        })
        return breadcrumbArray
      }, [])
      return breadcrumbs
    }
  }
}
</script>

我的问题是，如果有超过 2 个级别，它就不起作用，然后面包屑会删除 link 的第一部分，只保留最后 2 个路径：

例如这个有效：

domain.com/home
domain.com/home/1

但是如果我更深入地研究这样的事情：

domain.com/home/1/11
domain.com/home/1/11/111

面包屑从我的 URL 中删除了主页，只留下最后 2 link 到 1/11 或 11/111 作为路径。

与 console.log(this.crumbs)

我得到以下内容，我希望它能更好地说明我的意思:)

0: {path: "home", to: "/home", text: "home"}
1: {path: "1", to: "/home/1", text: "1"}
2: {path: "11", to: "/1/11", text: "11"}
3: {path: "111", to: "/11/111", text: "111"}
4: {path: "", to: "/111/", text: ""}

有人知道如何解决这个问题并始终获得完整路径吗？

Answer 1

我已将 to 部分更改为

  to: breadcrumbArray[idx - 1]
    ? '/' + breadcrumbArray.map(function (e) {
    return e.path
  }).join('/') + '/' + path
    : '/' + path,

现在所有路径都是完整路径

vue 面包屑未将完整路径设置为链接

vue breadcrumb not set fullpaths as links

vue.js

router

quasar-framework