vue-router学习7：路由元信息

路由元信息允许你在路由配置中添加自定义的信息，并在组件内或者守卫中访问这些信息。这些元信息可以是任何你需要的数据，比如页面标题、是否需要认证、角色权限等。

定义路由元信息

在路由配置中，你可以为每个路由对象添加一个 meta 字段，并在其中定义你需要的元信息。这些信息可以是简单的字符串、数字，也可以是对象、数组等复杂类型。

<!-- router/index.ts -->  
import { createRouter, createWebHistory } from 'vue-router';  
  
const routes = [  
  {  
    path: '/',  
    name: 'Home',  
    component: () => import('@/views/Home.vue'),  
    meta: {  
      title: '首页',  
      requiresAuth: false  
    }  
  },  
  {  
    path: '/dashboard',  
    name: 'Dashboard',  
    component: () => import('@/views/Dashboard.vue'),  
    meta: {  
      title: '控制面板',  
      requiresAuth: true  
    }  
  },  
  // ...其他路由  
];  
  
const router = createRouter({  
  history: createWebHistory(),  
  routes  
});  
  
export default router;

在上面的例子中，我们为两个路由（Home 和 Dashboard）分别定义了元信息 title 和 requiresAuth。title 用于表示页面的标题，而 requiresAuth 用于表示该页面是否需要用户认证。

访问路由元信息

在组件内部或者导航守卫中，你可以通过 $route.meta 来访问这些元信息。

1. 在组件内访问元信息

<template>  
  <div>  
    <h1>{{ title }}</h1>  
    <!-- 页面内容 -->  
  </div>  
</template>  
  
<script setup lang="ts">  
import { ref, onMounted } from 'vue';  
import { useRoute } from 'vue-router';  
  
const route = useRoute();  
const title = ref('');  
  
onMounted(() => {  
  title.value = route.meta.title || '默认标题';  
});  
</script>

在上面的组件中，我们使用了 useRoute 钩子来获取当前路由的信息，并在 onMounted 生命周期钩子中设置页面的标题。

2. 在导航守卫中访问元信息

在全局守卫、路由独享的守卫或者组件内的守卫中，你也可以访问到路由的元信息：

// 全局前置守卫  
router.beforeEach((to, from, next) => {  
  if (to.meta.requiresAuth && !isAuthenticated()) {  
    // 如果页面需要认证但用户未认证，则重定向到登录页  
    next('/login');  
  } else {  
    next();  
  }  
});

在上面的全局前置守卫中，我们检查了 to.meta.requiresAuth 来决定是否需要用户认证，如果不满足条件则重定向到登录页。