vue3.2 动态面包屑导航

1、创建面包屑导航组件 breadcrumb.vue,elementplus中有

2、js操作，获取当前路由的完整路径

//引用路由
import {useRoute} from 'vue-router
const route=useRoute()

//当前路由的完整路径
console.log(route.matched)

但是，我们每次点击菜单跳转，都要进行变化，所以不能写死

// 引入路由
import { useRoute} from 'vue-router'
const route = useRoute()
const breadcrumbList = ref([])
const initBreadcrumbList = () => {
  breadcrumbList.value = route.matched
  // 当前路由的完整路由表
  console.log(route.matched)
}
watch(
  route,
  () => {
    initBreadcrumbList()
  },
  { deep: true, immediate: true }
)


监听来实现

3、渲染到面包屑导航 v-for

<el-breadcrumb separator="/">
    <el-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="index">
      <span class="no-redirect" v-if="index === breadcrumbList.length - 1">{{
        $t(`menus.${item.name}`)
      }}</span>
      <span class="redirect" v-else @click="handleRedirect(item.path)">{{
       $t(`menus.${item.name}`)
      }}</span>
    </el-breadcrumb-item>
  </el-breadcrumb>

4、若不是最后一项，点击要进行相应的跳转

// 引入路由
import { useRouter } from 'vue-router'
const router = useRouter()
const handleRedirect = (path) => {
  router.push(path)
}

扩展：

   useRouter:相当于Vue2的 this.$router全局的路由实例

   useRoute:相当于Vue2的this.$route，表示当前激活的路由的状态信息