K先生个人博客

当前位置:首页 > 爱技术 > 正文

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

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

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

alone系列之alone-admin后台管理系统

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

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

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

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

<template>
  <div>
    我是一个测试的vue视图
  </div>
</template>

<script>
</script>

<style>
</style>

然后我们在路由文件中定义这个文件的路由,路由文件一般在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文件,

<el-breadcrumb class="bread" separator="/">
  <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item v-for="(item,index) in $route.meta" :key="index">{{item}}</el-breadcrumb-item>
</el-breadcrumb>
<router-view/>

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

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

作者K先生本文地址http://www.gold404.cn/info/85

版权声明:本文为原创文章,版权归 K先生个人博客 所有,欢迎分享本文,转载请保留出处,谢谢!

文章评论

* 必填
可选
可选

评论列表