最近突发奇想,突然想整个属于自己的管理系统,以后接项目做就会方便很多,不是很喜欢用网上那些人家做好的后台管理模板,并不是因为模板不好,相反有些模板还非常漂亮,但自己好像就是不想用别人的,这好像是一种职业病......先说一下自己搞的这个后台管理系统的名字是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数据中就可以了。
原理就是这样,当然你可以灵活去用。