路由元信息
通过路由记录的
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 - 产生的效果就是能够在路由跳转后,网页的标题也随之发生改变,变成对应路由的信息(比如我们设定好的登录和首页)
- 前置路由守卫有三个参数分别为