路由元信息允许你在路由配置中添加自定义的信息,并在组件内或者守卫中访问这些信息。这些元信息可以是任何你需要的数据,比如页面标题、是否需要认证、角色权限等。
定义路由元信息
在路由配置中,你可以为每个路由对象添加一个 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
来决定是否需要用户认证,如果不满足条件则重定向到登录页。