vue-router-crumbs

Auto generate dynamic bread crumbs based on vue router

Note:

The route corresponding to each breadcrumb needs to configure the meta attribute, and configure the display text of the route in it

Usage:

import Vue from 'vue';
import Router from 'vue-router';
import autoCrumbs from 'vue-router-crumbs'


Vue.use(Router);
const router = new Router({...})

router.beforeEach((to,from,next)=>{
    const { matched } = to;
    
  /**
   * unshift     --   When there is a homepage, put it at the top of the breadcrumbs
   * metaNameKey --   Custom your meta name field, the 'name' is default
   */
  const crumbs = autoCrumbs({ match, unshift: {text:'',to:''}, metaNameKey:''});
  // The value obtained here should be saved in store (vuex or pinia).
    console.log(crumbs);
    // ...
    next()
})