一直对Vue的路由一知半解，今天在做项目的时候，需要写一个面包屑的功能，层级不多只有二级，就想到了路由元信息这个东西了。其实，这个可以任意发挥了，我这里只是偷懒。

直接上代码吧：

const router = new VueRouter({
    linkActiveClass: 'active',
    routes: [
        {
            path: '/item1',
            name: '商品1',
            component: item1,
            meta:{
                title:'商品列表'
            }
        }
    ]
})

面包屑：

<div class="breadcrumb">
    <span>当前位置：</span>
    <span>{{this.$route.meta.title}}</span>
    <i class="el-icon-arrow-right"></i>
    <span>{{this.$route.name}}</span>
</div>

反正路由是自己定义的，这样的话，在定义路由的时候就把上一级给定义上。

另外，路由还可以传参数，如果二级导航里面有些需要跳转到查看某个详情，需要在路由里面传参数，然后在面包屑里面获取参数，这样就可以做出三级面包屑了，只不过这不是最优的结局方案，待我有更好的方案，我会继续补充。