码迷,mamicode.com
首页 > Web开发 > 详细

vue路由中的 Meta

时间:2018-02-02 20:12:01      阅读:354      评论:0      收藏:0      [点我收藏+]

标签:dex   add   col   单列   inf   页面   use   pos   item   

 在项目中肯定有这样的需求,那就是在某个页面的时候,顶部展示 现在当前的页面路径,如下图:

技术分享图片

这个在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

标签:dex   add   col   单列   inf   页面   use   pos   item   

原文地址:https://www.cnblogs.com/haonanZhang/p/8406441.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!