vue路由中的 Meta

Posted 2020-10-23 haonanzhang

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

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

我们便可以拿到当前页面的路径。