前端路由里的meta

阿喵派我来抓鱼

于 2024-04-13 15:05:52 发布

阅读量817

点赞数 27

文章标签：前端 vue.js chrome

本文链接：https://blog.csdn.net/chl13218996367/article/details/137711010

版权

前端做了这么久，路由也是天天打交道，今天不讲大方向的路由了，只讲讲路由配置里面的meta，这个时常被人忽略但又常常在我们视线里的部分，也是因为我发现好像并没有人去特别的关注这一块。

首先，我们围绕meta，提出几个问题再一一根据这些去了解和使用meta

meta是什么？

meta为什么要存在？

meta怎么使用？

meta可以自定义吗？

meta的属性配置和使用场景？

那么，好的，有了这些问题，思路就清晰了很多，下面本喵就逐一解答喽

meta是什么？

是用来存储路由相关的一些额外信息。您可以把它理解为附加在路由上的标签或属性，这些标签或属性对应的信息可以在路由守卫、组件等地方被访问和利用。

简单来说就是在使用路由时，你想要进行的属性配置，另外我们也称meta为路由元信息。

meta为什么要存在？

了解是什么的概念之后，这个问题就很好理解了，因为我们需要在路由使用时完成更多的需求。

meta怎么使用？

最直接的使用方法就是写在路由配置里

routes: [
    {
      path: '/foo',
      component: Foo,
      children: [
        {
          path: 'bar',
          component: Bar,
          // a meta field
          meta: { requiresAuth: true }
        }
      ]
    }
  ]

直接像这样，我们只需要明白属性配置的含义即可

另外，我还想要提的一点是，路由里的meta是如何访问的，我们配置完属性之后，那应该如何生效呢？

首先，我们称呼 routes 配置中的每个路由对象为 路由记录。路由记录可以是嵌套的，因此，当一个路由匹配成功后，他可能匹配多个路由记录

例如，根据上面的路由配置，/foo/bar 这个 URL 将会匹配父路由记录以及子路由记录。

一个路由匹配到的所有路由记录会暴露为 $route 对象 (还有在导航守卫中的路由对象) 的 $route.matched 数组。因此，我们需要遍历 $route.matched 来检查路由记录中的 meta 字段。

下面例子展示在全局导航守卫中检查元字段：

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // this route requires auth, check if logged in
    // if not, redirect to login page.
    if (!auth.loggedIn()) {
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      })
    } else {
      next()
    }
  } else {
    next() // 确保一定要调用 next()
  }
})

meta可以自定义吗？

可以的，上面也说到了它的定义，就是一种附加的属性配置，还有它的访问方法，那么自然就是可以自定义的，只不过，我们在使用除了路由元信息自带的属性之外，自定义的属性需要我们自己去设置如何使用。下面举例（只以noNeedLogin为例，请注意）：

{

path: '/login',

name: 'Login',

component: () => import('@/pages/Login'),

meta: {

hideHeader: true,

trust: true,

noNeedLogin: true //自定义名称noNeedLogin

}

},

router.beforeEach(async (to, from, next) => {

NProgress.start() //进度条效果，这里不用管

// 检测是否需要用户登录验证

if(to.meta.noNeedLogin){ //这里使用

next()

return;

}else{

需要登录并且需要拦截

}

})

meta的属性配置和使用场景？

到这里大家也发现了，其实meta定义还是使用，都不难，但是属性还是挺多的，为了让大家使用方便，在这里列一下

title：用于设置页面的标题，可以在浏览器的标签页或页面导航中显示。

description：用于描述页面的内容或功能，可以在搜索引擎的搜索结果中显示。

keywords：用于标识页面的关键字，可以在搜索引擎的搜索结果中显示。

icon：用于指定页面的图标，可以在浏览器的标签页中显示。

requiresAuth：用于标识页面是否需要登录或鉴权才能访问。

breadcrumb：用于设置页面的面包屑导航，可以提供更好的页面导航和用户体验。

layout：用于指定页面的布局组件，可以根据不同的路由设置不同的布局。

roles：用于指定页面所需的用户角色，可以在权限控制中使用。

cache：用于标识页面是否需要缓存，以便提高页面的加载速度。

hidden：用于标识页面是否需要在菜单或导航中隐藏。

og:title：用于设置网页在社交媒体平台（如Facebook、Twitter）上的分享标题。

og:description：用于设置网页在社交媒体平台上的分享描述。

og:image：用于设置网页在社交媒体平台上的分享图片。

og:url：用于设置网页在社交媒体平台上的分享链接。

canonical：用于指定网页的主要URL，避免重复内容或URL。

prefetch：用于指定页面加载前预取资源，提前加载页面所需的其他资源，以提高页面访问速度。

transition：用于设置页面过渡效果，以提供更流畅的页面切换效果。

pageClass：用于指定页面的自定义类名，可以用于针对页面样式的定制。

keepAlive：用于标识页面是否需要保持存活状态，以便在路由切换时缓存页面。

beforeEnter：用于指定路由进入前的钩子函数，在进入页面之前执行一些特定的操作。

beforeLeave：用于指定路由离开前的钩子函数，在离开页面之前执行一些特定的操作。

scrollToTop：用于标识路由切换是否需要滚动到页面顶部。

queryParams：用于在路由之间传递查询参数，可以在路由间做某些状态的传递。

transitionDelay：用于设置页面切换动画的延迟时间。

metaTags：用于指定页面的自定义meta标签

permission：用于设置页面访问权限，控制用户是否有权访问该页面。

activeTab：用于指定页面加载后默认显示的选项卡或标签页。

scrollBehavior：用于设置路由切换时页面的滚动行为，如滚动到指定位置或禁用滚动等。

pageKey：用于标识页面的唯一key，在路由切换时辅助缓存或重新渲染页面。

navTitle：用于指定页面在导航栏中的显示标题。

hideNav：用于标识页面是否隐藏导航栏。

hideFooter：用于标识页面是否隐藏页脚。

isMobile：用于指定页面的设备类型，以便在响应式设计中做特定样式或布局调整。