Vue-Router - el-breadcrumb 自动渲染路径

通过 router 获取当前的路由列表，在路由变化时，调用 getCurrentRouteList 重新获取当前的路由列表。

file:[src/App.vue - script]
const route = useRoute();
const router = useRouter();

function getCurrentRouteList() {
  return router.currentRoute.value.matched;
}

watch(route, () => {
  list.value = getCurrentRouteList();
});

因为一条路径下来的最后一个路径是灰色不导航的，所以不需要点击跳转功能。因此给一个判断，除了最后一个路由路径以外的其余路由都可以跳转。

file:[src/App.vue - template]
<el-breadcrumb separator="/">
  <template v-for="(item, index) in list">
    <el-breadcrumb-item v-if="index != list.length - 1" :to="item.path">
      {{ item.meta.title }}
    </el-breadcrumb-item>
    <el-breadcrumb-item v-else>
      {{ item.meta.title }}
    </el-breadcrumb-item>
  </template>
</el-breadcrumb>

在定义路由列表时，需要给一个 meta 元信息，给每一个路由路径定义一个标题就可以了。