SoFunction
Updated on 2025-03-09

Detailed explanation of dynamic routing of VUE+elementui breadcrumbs

My route:

const routerMap = [
  {
    path: '/',
    redirect: 'dashboard',
    component: Layout,
    name:'Dashboard',
    children: [
      {
        path: 'dashboard',
        component: () => import('@/view/dashboard'),
        name: 'Dashboard',
        meta: { title: 'dashboard', icon: 'dashboard', noCache: true }
      }
    ]
  },{
    path:'/test',
    component:Layout,
    redirect: '/test/index',
    name:'Test',
    meta:{title:'test',icon:'lock'},
    children:[
      {
        path:'index',
        component:()=>import('@/view/test'),
        name:'test',
        meta:{title:'test', icon: 'example', noCache: true }
      },{
        path:'example',
        component:()=>import('@/view/test/example'),
        name:'example',
        meta:{title:'example',icon:'404'}
      }
    ]
  }
]

Breadcrumb code:

<template>
  <div class="navbar clearfix">
    <el-breadcrumb class="breadcrumb-container" separator-class="el-icon-arrow-right">
      <el-breadcrumb-item v-for="item in levelList":key="" :to="">{{}}</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script>
  export default {
    name: 'Navbar',
    data() {
      return {
        levelList: []
      }
    },
    watch: {
      $route() {
        ()
      }
    },
    created(){
      ()
    },
    methods:{
      getBreadcrumb() {
        let matched = this.$(item => )
        const first = matched[0];
        if (first && ().toLocaleLowerCase() !== 'Dashboard'.toLocaleLowerCase()) {
          matched = [{ path: '/dashboard', meta: { title: 'dashboard' }}].concat(matched)
        }
         = matched
      }
    }
  }
</script>

principle:Dynamically update the content of breadcrumbs by listening for changes in the current route.

The above detailed explanation of the dynamic routing of VUE+elementui breadcrumbs is all the content I have shared with you. I hope you can give you a reference and I hope you can support me more.