【vue】meta的使用

在路由中设置:

import Router from 'vue-router’

import Vue from 'vue'

import sideBar from '@/components/sideBar'

import header from '@/components/header'

Vue.use(Router)

export default new Router({

    routes: [{

        path: '/',

        name: 'index',

        components: {

            sideBar: sideBar,

            header: header,

            content: () => import('@/views/index.vue')  //异步组件加载

        },

        meta: { sideBarIndex: '/'}

    }

    ]

})

 

使用的时候:

this.$route.meta.sideBarIndex

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue路由配置中,可以使用`meta`字段来添加自定义的元数据信息。`meta`字段可以用来存储一些和路由相关的额外信息,比如页面的标题、权限要求等。 下面是一个示例的路由配置,演示如何使用`meta`字段: ```javascript import Vue from 'vue'; import VueRouter from 'vue-router'; Vue.use(VueRouter); const routes = [ { path: '/', name: 'Home', component: Home, meta: { title: '首页', // 设置页面标题 requiresAuth: true // 设置需要登录权限 } }, { path: '/about', name: 'About', component: About, meta: { title: '关于我们' } } ]; const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes }); // 在路由跳转前,可以通过导航守卫获取和处理meta字段的信息 router.beforeEach((to, from, next) => { document.title = to.meta.title || '默认标题'; // 设置页面标题 if (to.meta.requiresAuth && !isAuthenticated()) { next('/login'); // 如果需要登录权限且未登录,跳转至登录页 } else { next(); // 否则继续正常跳转 } }); export default router; ``` 在上述示例中,每个路由对象都包含了一个`meta`字段,其中的属性可以根据需要自定义。通过导航守卫的`beforeEach`钩子函数,我们可以在路由跳转前获取和处理`meta`字段的信息。比如,我们可以根据`meta`字段的`requiresAuth`属性来检查用户是否已经登录,如果未登录则跳转至登录页。 希望以上信息对你有所帮助!如果还有其他问题,请随时提问。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值