Vue.js 2的面包屑插件 - vue-2-crumbs

Vue.js 2的面包屑插件 - vue-2-crumbs
插件名称 vue-2-crumbs
发布时间 2020年9月23日
插件作者 Suruat

Vue.js 2框架的Breadcrumbs插件,无需子路由即可在路由元对象中选择父路由。

特征:

  • 设置父路由,而无需实际将其嵌套在子数组中
  • 允许使用范围内的插槽自定义模板
  • 子路由作为默认行为
  • 在页面组件中定义面包屑信息
  • 速记标签(breadcrumb: 'Page Label'
  • 定义父级的参数,查询,哈希
  • 动态面包屑(有一些警告)。

安装和下载:

# NPM
$ npm install vue-2-crumbs --save

用法

使用breadcrumb路由中的属性meta提供路由标签或/和父路由name,如下例所示:

new VueRouter({
  routes: [
    {
      path: '/',
      name: 'home', 
      component: Home,
      meta: {
        breadcrumb: 'Home Custom Label' 
      }
    },
    {
      path: '/about',
      name: 'about',
      component: About,
      meta: {
        breadcrumb: {
          label: 'Custom About page Label',
          parent: 'home'
        }
      }
    },
    {
      path: '/contact',
      name: 'contact', 
      component: Contact,
      meta: {
        breadcrumb: {
          parent: 'about'
        }
      }
    }
  ]
})