breadcrumb 根据路由_vue利用路由meta轻松实现面包屑导航

最近突发奇想，突然想整个属于自己的管理系统，以后接项目做就会方便很多，不是很喜欢用网上那些人家做好的后台管理模板，并不是因为模板不好，相反有些模板还非常漂亮，但自己好像就是不想用别人的，这好像是一种职业病......先说一下自己搞的这个后台管理系统的名字是alone-admin，后面可能还会有alone-api、alone-video、alone-music等等吧。反正就是想整个alone系列，当然自己也对alone系列作品寄于了很高的期望。

下图是alone-admin后台管理系统的初始形态，不知道会不会有小伙伴喜欢。

上面算是为自己的alone-admin后台管理系统做了一波宣传，下面言归正传，说说vue怎么利用路由meta轻松实现面包屑导航的。

vue利用路由meta轻松实现面包屑导航

首先我们先理一下实现面包屑导航的原理吧，面包屑说简单点就是当我访问哪个页面时，他就变成该页面的标题，也就是说我们只要向它传递一个参数就行了。那我们再说一下，我们本案例的使用场景，本来就是

我们先创建一个Test.vue文件，

我是一个测试的vue视图

然后我们在路由文件中定义这个文件的路由，路由文件一般在src/router目录。{

path: '/',

name: 'Home',

component: Home,

children: [{

path: 'test',

component: () => import( /* webpackChunkName: "test" */ '../views/Test.vue'),

meta:['测试']

}

]}

我把它定义为我Home组件的一个子路由，home的路由为"/"，所以这个Test.vue的路由就是"/test"了。那下面就是怎么使用这个meta了。

打开Home.vue文件，

首页

{{item}}

这是用了element ui的面包屑导航，你并不需要过多的去关注它，从代码中可以看出$route.meta是用了v-for循环出来了，为什么要用循环，因为我们定义的meta是一个数组啊，忘记的往上翻看看，其实到这里你应该能明白了。$route.meta能读取我们在路由文件中定义的meta数据，所以，我们定义路由的时候，顺便把标题写到meta数据中就可以了。

原理就是这样，当然你可以灵活去用。