使用TS进行Vue-Router的Meta类型扩展

1、前言

使用Vue-Router时，会将一些字段信息附加到路由的Meta对象里面，比如图标icon，标题，权限等，如下：

{
  path: '/billboard/board/:boardId',
  name: 'billboardBoard',
  props: true,
  component: () => import('@/views/billboard/board.vue'),
  meta: {
    title: 'message.router.billboard',
    isHide: true,
    isKeepAlive: false,
    isAffix: false,
    isIframe: false,
    icon: 'iconfont icon-board'
  }
}

但是在使用的过程中，TS会认为这些字段是unknown类型，从而导致赋值或者使用的时候会报错：

router.beforeEach((to) => {
    document.title = to.meta.title || '默认标题'
})

如图：

报错提示.png

2、解决

为了避免报错和标红（虽然不影响程序运行），我们可以通过扩展RouteMeta接口，声明Meta的字段，这样在使用过程中不仅不会报错标红，还会有代码提示，方法如下：

在根目录或者types目录下，新建一个router-meta.d.ts文件，文件内容如下：

/**
 * @description 扩展ruoter-meta的类型 此处必须要export {} 不然找不到类型
 */
declare module 'vue-router' {
    interface RouteMeta {
        permission?: Array<string>
        title?: string
        icon?: string
        affix?: boolean
        hidden?: boolean
        keepAlive?: boolean
    }
}

export {}

在根目录tsconfig.json的include选项中，能够包含到这个文件即可。

{
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "types/**/*.d.ts", "types/**/*.ts"],
  "exclude": ["node_modules/**", "dist", "**/*.js"]
}

如图：

类型提示.png

本次分享就到这儿啦，我是@鹏多多，如果您看了觉得有帮助，欢迎评论，关注，点赞，转发，我们下次见~

PS：在本页按F12，在console中输入document.querySelectorAll('._2VdqdF')[0].click()，有惊喜哦

往期文章

个人主页

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

使用TS进行Vue-Router的Meta类型扩展

使用TS进行Vue-Router的Meta类型扩展

1、前言

2、解决

推荐阅读更多精彩内容

友情链接更多精彩内容