路由元信息

来源：Vue3 + vite + Ts + pinia + 实战 + 源码 +electron

通过路由记录的meta属性可以定义路由元信息

使用路由元信息可以在路由中附加自定义数据，例如权限校验表示、路由组件过度名称、持久化（keep-alive）相关配置、标题名称等

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

/router/index.ts：

import { createRouter, createWebHistory } from "vue-router"
import type { RouteRecordRaw } from "vue-router"

declare module "vue-router" {
  // 声明meta的类型
  interface RouteMeta {
    title: string
  }
}

const routes: Array<RouteRecordRaw> = [
  {
    path: "/",
    component: ()=> import("@/components/Login.vue"),
    meta: {
      title: "登录页面"
    }
  },
  {
    path: "/index",
    component: ()=> import("@/components/Index.vue"),
    meta: {
      title: "首页"
    }
  }
]

const router = createRouter({
  // 路由的模式
  history: createWebHistory(),
  // 路由信息
  routes
})

router.beforeEach((to,from,next)=> {
  // 这里可以读到meta
  document.title = to.meta.title
  next()
})

export default router