由路由参数动态生成当前页面的路径 ``` <el-breadcrumb separator="/" class="breadcrumb"> <el-breadcrumb-item v-for="item in $route.meta.nav" :key="item.path"> <router-link :to="item.path" v-if="item.path">{{ item.name }}</router-link> <span v-else>{{ item.name }}</span> </el-breadcrumb-item> </el-breadcrumb> ``` >[info] 显示效果 ![](https://img.kancloud.cn/51/2b/512bbdadd9afc05ffcf1513806187ad1_337x60.png) >[info] 示例代码 ``` <template> <div class="page-container"> <!--导航与工具栏--> <bread-crumb></bread-crumb> </div> </template> <script> import breadCrumb from '@/components/bread_crumb' export default { components: { breadCrumb } } </script> ```