小满Router(第九章-路由元信息)

简介: 通过路由记录的 meta 属性可以定义路由的元信息。使用路由元信息可以在路由中附加自定义的数据,

路由元信息


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


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


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


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
  }
}


目录
相关文章
|
移动开发 前端开发 JavaScript
从零开始学习前端开发:入门指南
本文将介绍从零开始学习前端开发的入门指南。通过学习HTML、CSS和JavaScript等基础知识,读者将了解前端开发的基本概念和工具,并学会如何构建简单的网页应用程序。无论您是初学者还是有一定经验的开发人员,本文都将帮助您打下坚实的前端开发基础。
|
小程序 前端开发 JavaScript
微信小程序框架---视图层&逻辑层&API&事件
微信小程序框架---视图层&逻辑层&API&事件
450 0
|
8月前
|
监控 网络协议 视频直播
UDP协议(特点与应用场景)
UDP(用户数据报协议)是传输层的一种无连接协议,具有简单高效、低延迟的特点。其主要特点包括:无连接(无需握手)、不可靠传输(不保证数据完整性)、面向数据报(独立传输)。尽管UDP不如TCP可靠,但在实时通信(如语音通话、视频会议)、在线游戏、多媒体流媒体(如直播、点播)及网络监控等领域广泛应用,满足了对速度和实时性要求较高的需求。
1329 19
|
人工智能 监控 Python
[AI Embedchain] 集成 Langsmith
[AI Embedchain] 集成 Langsmith
[AI Embedchain] 集成 Langsmith
|
开发框架 缓存 前端开发
基于SqlSugar的开发框架循序渐进介绍(8)-- 在基类函数封装实现用户操作日志记录
基于SqlSugar的开发框架循序渐进介绍(8)-- 在基类函数封装实现用户操作日志记录
|
存储 网络协议 程序员
【.NET Core】.NET中的流(Stream)
【.NET Core】.NET中的流(Stream)
469 7
|
机器学习/深度学习 人工智能 搜索推荐
推荐3个文本转语音AI工具
三款文本转语音工具各具特色,适用于不同的场景和需求。ELEVENLABS语音合成凭借其高质量的语音输出和先进的技术支持,适合对音质有较高要求的用户;TTSMAKER语音合成简单易用,功能丰富,适合普通用户日常使用;SPEECHIFY文本转语音则注重实用性和便捷性,特别适用于长时间阅读或学习场景。无论你是职场人士、学生还是语言学习者,都能在这些工具中找到适合自己的选择。【6月更文挑战第4天】
918 0
|
C++
【SPSS】游程检验-变量值随机性检验和两独立样本的W-W游程检验详细操作教程(附案例实战)
【SPSS】游程检验-变量值随机性检验和两独立样本的W-W游程检验详细操作教程(附案例实战)
552 0
|
缓存 安全 程序员
公司敏感数据被上传Github,吓得我赶紧改提交记录
公司敏感数据被上传Github,吓得我赶紧改提交记录
281 0
|
JavaScript 开发者
vue3 404解决方法
vue3 404解决方法
767 0

热门文章

最新文章