Question

我设法使用npm在我的vue.js应用程序中实现了面包屑。但我希望面包屑显示指向上一页的链接，并在其旁边显示指向当前页面的链接（包括ID）。像这样：

主页>详细信息页面（作为clickeble链接）

我尝试通过此链接https://www.npmjs.com/package/vue-2-breadcrumbs]

中的示例

这是我的index.js文件

import Vue from 'vue'
import Details from '@/components/Details'
import Router from 'vue-router'
import HomePage from '@/components/HomePage'
import VueBreadcrumbs from 'vue-2-breadcrumbs'

Vue.use(Router)
Vue.use(VueBreadcrumbs,{
template:
    '            <ul class="breadcrumb">\n' +
    '                <li v-for="(crumb, key) in $breadcrumbs" v-if="crumb.meta.breadcrumb" :key="key" class="breadcrumb-item active" aria-current="page">\n' +
    '                    <router-link :to="{ path: getPath(crumb) }">{{ getBreadcrumb(crumb.meta.breadcrumb) }}</router-link>' +
    '                </li>\n' +
    '            </ul>\n' 
})

export default new Router({
    routes: [
        {
            path: '/',
            component: HomePage,
            name: 'HomePage',
            meta: {
                breadcrumb: 'Home Page',
            },

        },
        {
            path: '/Details/:id',
            component: Details,
            meta:{
                breadcrumb: function () {
                    const {name} = this.$route;
                    return `${name}`;
                  }
            },
            name: 'Details',
            props: true
        }


    ]
})

全部编译，并且确实渲染（但只有一个链接，该链接指向当前页面）。现在，我想将历史记录链接添加到我的面包屑（主页链接）中。我该怎么办？

Answer 1

好吧，所以我从您的所有评论中都得到了启发，这就是我的解决方法：

So I added one extra <li> to hold the "home page" and the second <li> för looping over the current page... I also wrapped everything inside a root-<div> so no errors about duouble root elements would occur.


Vue.use(VueBreadcrumbs,{
template:

'        <div v-if="$breadcrumbs.length" aria-label="breadcrumb">\n' +
'            <ol class="breadcrumb">\n' +
' <li class="breadcrumb-item"><a href="/">Home</a></li>' +
'                <li v-for="(crumb, key) in $breadcrumbs" v-if="crumb.meta.breadcrumb" :key="key" class="breadcrumb-item active" aria-current="page">\n' +
'                    <router-link :to="{ path: getPath(crumb) }">{{ getBreadcrumb(crumb.meta.breadcrumb) }}</router-link>' +
'                </li>\n' +
'            </ol>\n' +
'        </div>'
})

谢谢大家的帮助！

Answer 2

将另一个路由器链接添加到您的模板：

<div id="root">
<router-link :to="/">Home</router-link>
<ul class="breadcrumb">
  <li v-for="(crumb, key) in $breadcrumbs" v-if="crumb.meta.breadcrumb" :key="key" class="breadcrumb-item active" aria-current="page">
    <router-link :to="{ path: getPath(crumb) }">{{ getBreadcrumb(crumb.meta.breadcrumb) }}</router-link>
  </li>
</ul>
</div>

编辑： 以这种方式声明您的模板：

Vue.use(VueBreadcrumbs, {
  template: ```
    <div id="root">
    <router-link :to="/">Home</router-link>
    <ul class="breadcrumb">
      <li v-for="(crumb, key) in $breadcrumbs" v-if="crumb.meta.breadcrumb" :key="key" class="breadcrumb-item active" aria-current="page">
        <router-link :to="{ path: getPath(crumb) }">{{ getBreadcrumb(crumb.meta.breadcrumb) }}</router-link>
      </li>
    </ul>
    </div>
  ```
})

如何在vue.js中使用完整的点实现面包屑

2 个答案: