在项目中肯定有这样的需求，那就是在某个页面的时候，顶部展示 现在当前的页面路径，如下图：
这个在vue中其实很好实现。
首先出现这个肯定是相对应不同的页面，也就是说对应不同的路由，我们在定义路由的时候：如下
routes: [ ???????{ ???????????path: ‘/‘, ???????????name: ‘login‘, ???????????component: login ???????},{ ???????????path: ‘/Page‘, ???????????name: ‘Page‘, ???????????component: Page, ???????????children: [ ???????????????{ ???????????????????path: ‘/‘, ???????????????????name: ‘Chart‘, ???????????????????component: Chart, ???????????????????meta: [] ???????????????},{ ???????????????????path: ‘/UserList‘, ???????????????????name: ‘UserList‘, ???????????????????component: UserList, ???????????????????meta: [‘数据列表‘, ‘用户列表‘], ???????????????},{ ???????????????????path: ‘/OrderList‘, ???????????????????name: ‘OrderList‘, ???????????????????component: OrderList, ???????????????????meta: [‘数据列表‘, ‘订单列表‘] ???????????????},{ ???????????????????path: ‘/addShop‘, ???????????????????name: ‘addShop‘, ???????????????????component: addShop, ???????????????????meta: [‘添加数据‘, ‘添加商品‘] ???????????????} ???????????] ???????} ???]其次在 当前需要展示页面路径的地方：
<el-breadcrumb-item v-for="(item, index) in $route.meta" key="index">{{item}}</el-breadcrumb-item>我们便可以拿到当前页面的路径。
vue路由中的 Meta
原文地址：https://www.cnblogs.com/haonanZhang/p/8406441.html