vue中路由meta的作用

最新推荐文章于 2025-10-16 19:18:29 发布

原创最新推荐文章于 2025-10-16 19:18:29 发布 · 1w 阅读

25 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #html5

本文深入探讨Vue Router的Meta属性，介绍其定义与作用，并通过两个实际案例——登录校验与布局切换，展示如何灵活运用Meta属性提升路由管理效率。

meta的定义：meta简单来说就是路由元信息也就是每个路由身上携带的信息。

meta的作用：vue-router路由元信息说白了就是通过meta对象中的一些属性来判断当前路由是否需要进一步处理，如果需要处理，按照自己想要的效果进行处理即可

用法一：登录校验

router.beforeEach((to, from ,next) => {
    const token = store.getters.userInfo
    if(to.matched.some(record => record.meta.requireAuth)){
        next()//如果路由中有meta的requireAuth，且为true，就不进行登录验证，否则进行登录验证
    }else{
        if(token){
            next()
        }else{
            if(to.path==="/login"){
                next()
            }else{
                next({path:'/login'})
            }
        }
    }
    return
})

用法二：通过路由元信息实现不同路由展示不同布局页面

<template>
  <el-container :class="['app uf-col']">
    <template v-if="$route.meta.fullScreen">
      <router-view></router-view>
    </template>
    <template v-else-if="$route.meta.homePages">
      <Nav></Nav>
      <router-view></router-view>
    </template>
  </el-container>
</template>