Auto generate dynamic bread crumbs based on vue router
The route corresponding to each breadcrumb needs to configure the meta attribute, and configure the display text of the route in it
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()
})