第九章——路由元信息

路由元信息

通过路由记录的 meta 属性可以定义路由的元信息。使用路由元信息可以在路由中附加自定义的数据，例如：

• 权限校验标识。
• 路由组件的过渡名称。
• 路由组件持久化缓存 (keep-alive) 的相关配置。
• 标题名称

---

有时我们想将一些信息附加到路由上，如过渡名称、谁可以访问路由等。这些事情可以通过接收属性对象的 meta 属性来实现，并且它可以在路由地址和导航守卫上都被访问到。定义路由的时候你可以这样配置 meta 字段

我们可以在导航守卫或者是路由对象中访问路由的元信息数据。

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      component: () => import('@/views/Login.vue'),
      meta: {
        title: "登录"//这里定义什么都行，最终这里的数据是会被获取到的
      }
    },
    {
      path: '/index',
      component: () => import('@/views/Index.vue'),
      meta: {
        title: "首页",
      }
    }
  ]
})

使用 TS 扩展

如果不使用扩展 将会是 unknow 类型

declare module 'vue-router' {
  interface RouteMeta {//接口写法，将title变成是否可选的string类型
    title?: string//这个问号不写也没有关系，意思就变为title必须为string(字符串)类型
  }
}

如何获取元信息

在组件中可以通过 this.$route.meta 来获取

在路由中获取:

 router.beforeEach((to, from, next) => {
 //通过to.meta来获取路由元信息
 console.log(to.meta.requiresAuth);
})

• 通过这类方法我们可以在配置文件中通过router.beforeEach，也就是前置路由守卫中进行设置
  • 前置路由守卫有三个参数分别为to，from，next。我们这里使用到to，意思是将要去哪里的意思，我们通过to.meta.title拿到了我们在routers中对应的路由中配置的mate中的title，然后将这个值赋值给document.title
  • 产生的效果就是能够在路由跳转后，网页的标题也随之发生改变，变成对应路由的信息(比如我们设定好的登录和首页)