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 || '默认标题'
})
如图：
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"]
}
如图：
本次分享就到这儿啦，我是鹏多多，如果您看了觉得有帮助，欢迎评论，关注，点赞，转发，我们下次见~
PS：在本页按F12，在console中输入document.querySelectorAll('.diggit')[0].click()，有惊喜哦
公众号
往期文章
- Vue2全家桶+Element搭建的PC端在线音乐网站
- 超详细的Cookie增删改查
- 助你上手Vue3全家桶之Vue-Router4教程
- 助你上手Vue3全家桶之Vue3教程
- 助你上手Vue3全家桶之VueX4教程
- 使用nvm管理node.js版本以及更换npm淘宝镜像源
- 超详细！Vue-Router手把手教程
- 超详细！Vue的九种通信方式
- 超详细！Vuex手把手教程
个人主页