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

news2024/12/25 9:18:21

文章目录

  • 1、前言
  • 2、解决

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

如图:提示


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

往期文章

  • Vue2全家桶+Element搭建的PC端在线音乐网站
  • vue3+element-plus配置cdn
  • 助你上手Vue3全家桶之Vue3教程
  • 助你上手Vue3全家桶之VueX4教程
  • 助你上手Vue3全家桶之Vue-Router4教程
  • 超详细!Vue的九种通信方式
  • 超详细!Vuex手把手教程
  • 使用nvm管理node.js版本以及更换npm淘宝镜像源
  • vue中利用.env文件存储全局环境变量,以及配置vue启动和打包命令
  • 超详细!Vue-Router手把手教程

个人主页

  • CSDN
  • GitHub
  • 简书
  • 博客园
  • 掘金

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1190236.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

超全总结!大模型算法面试指南(含答案)

大家好&#xff0c;从 2019 年的谷歌 T5 到 OpenAI GPT 系列&#xff0c;参数量爆炸的大模型不断涌现。可以说&#xff0c;LLMs 的研究在学界和业界都得到了很大的推进&#xff0c;尤其去年 11 月底对话大模型 ChatGPT 的出现更是引起了社会各界的广泛关注。 近些年&#xff0…

java项目之服装定制系统(ssm框架)

项目简介 服装定制系统实现了以下功能&#xff1a; 管理员&#xff1a;管理员使用本系统涉到的功能主要有首页、个人中心、用户管理、服装类型管理、服装信息管理、服装定制管理、留言反馈、系统管理等功能。用户&#xff1a;用户进入系统可以对首页、个人中心、服装定制管理…

Java类和对象(1)

&#x1f435;本篇文章将会开始对类和对象的第一部分讲解 一、简单描述类和对象 对象可以理解为一个实体&#xff0c;在现实生活中&#xff0c;比如在创建一个建筑之前&#xff0c;要先有一个蓝图&#xff0c;这个蓝图用来描述这个建筑的各种属性&#xff1b;此时蓝图就是类&a…

C++day6作业

1.思维导图 2.编程题&#xff1a; 以下是一个简单的比喻&#xff0c;将多态概念与生活中的实际情况相联系&#xff1a; 比喻&#xff1a;动物园的讲解员和动物表演 想象一下你去了一家动物园&#xff0c;看到了许多不同种类的动物&#xff0c;如狮子、大象、猴子等。现在&am…

后台管理系统解决方案-中大型-Vben Admin

后台管理系统解决方案-中大型-Vben Admin 官网 Vben Admin 在线演示 Vben Admin 为什么选择它 github现有20K星&#xff0c;并且它有个可视化生成表单&#xff0c;我很喜欢 快速开始 # 拉取代码 git clone https://github.com/vbenjs/vue-vben-admin-doc# 安装依赖 yarn#…

天津WEB前端培训哪家好?Web机构推荐!

05年以后&#xff0c;互联网已经进入了web2.0时代&#xff0c;同时也标志着网站的前端由此发生了翻天覆地的变化&#xff0c;现在市场上对WEB前端开发工程师岗位有着很大的需求&#xff0c;学习web前端开发的方式有很多种&#xff0c;对于初学者来说&#xff0c;选择自学还是培…

使用篇(一):Ai绘图-Stable Diffusion WebUI

1.介绍 1.1 概述 Stable Diffusion Web UI是一个基于Stable diffusion AI模型的AI绘画软件。它是一个多功能的AI绘画软件&#xff0c;支持以下几个功能&#xff1a; 用户可以输入一堆关键词或一句话来生成图片。 它使用了图像加噪去噪过程中的生成模型—— Duffusion&#xff…

与set和map相关的OJ题练习

一、两个数组的交集 题目链接&#xff1a; 349. 两个数组的交集 - 力扣&#xff08;LeetCode&#xff09; 题目描述&#xff1a; 给两个数组&#xff0c;求在数组里面共同出现的部分&#xff0c;就是求两个数组的交集&#xff0c;返回顺序不做要求 解题思路&#xff1a; …

视频剪辑:制作视频画中画效果,背景图片的添加方法

随着社交媒体的兴起&#xff0c;视频制作越来越受到人们的关注。在视频制作过程中&#xff0c;除了主要的画面&#xff0c;背景图片往往能够增加视频的层次感和视觉效果。今天&#xff0c;我们就来探讨一下如何使用云炫AI智剪制作视频画中画效果&#xff0c;并添加背景图片。 在…

Java自学第6课:电商项目(2)

1 创建工具类并连接数据库 在工程src右键单击new&#xff0c;新建util包 再创建DBUtil类 数据库交互需要有数据库支持的包&#xff0c;这是官方给出的类库。 先声明1个代码块 // 静态代码块 只加载1次static{try {Class.forName("com.mysql.jdbc.Driver");} catch (…

基于springboot实现高校党务平台管理系统【项目源码】

基于springboot实现高校党务平台管理系统演示 Java技术 Java是由Sun公司推出的一门跨平台的面向对象的程序设计语言。因为Java 技术具有卓越的通用性、高效性、健壮的安全性和平台移植性的特点&#xff0c;而且Java是开源的&#xff0c;拥有全世界最大的开发者专业社群&#x…

可持久化01Trie

例题&#xff1a; 解释&#xff1a; 首先这里要求连续异或&#xff0c;所以存储前缀异或和数组。首先的话&#xff0c;我们只考虑前r个版本的Trie&#xff0c;所以以root[r]为根节点的Trie就是1到r位置数。但是&#xff0c;还有一个l左端点&#xff0c;所以我们对于每一个节点…

python开发过程中注意编码规范~

文章目录 一、 代码编排二、 文档编排三、 空格的使用四、 注释五、 文档描述六、 命名规范总体原则&#xff0c;新编代码必须按下面命名风格进行&#xff0c;现有库的编码尽量保持风格。七 编码建议关于Python技术储备一、Python所有方向的学习路线二、Python基础学习视频三、…

解析虚拟文件系统的调用

Linux 可以支持多达数十种不同的文件系统。它们的实现各不相同&#xff0c;因此 Linux 内核向用户空间提供了虚拟文件系统这个统一的接口&#xff0c;来对文件系统进行操作。它提供了常见的文件系统对象模型&#xff0c;例如 inode、directory entry、mount 等&#xff0c;以及…

【Git】如何安装git,项目中使用git上传到远程仓库,使用git中对多人使用出现的版本问题的解决

前言&#xff1a; 一&#xff0c;Git的介绍&#xff0c;安装&#xff0c;与SVN的对比 1.1Git的介绍 Git 是一个开源的分布式版本控制系统&#xff0c;用于敏捷高效地处理任何或小或大的项目。 Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控…

c语言练习10周(11~15)

将b串中的所有字母字符连接在a串之后并输出&#xff0c;a,b串最多30个字符。 题干将b串中的所有字母字符连接在a串之后并输出&#xff0c;a,b串最多30个字符。输入样例abcdef 1A2D3C4F5GG输出样例abcdefADCFGG #include<stdio.h> int main() {char a[30], b[30];int i0…

20 VPN详解

1、连接数据中心 1.第一种方式是走公网&#xff0c;但是公网太不安全 2.第二种方式是专线&#xff0c;但是比较贵 3.VPN连接2、vpn的概念 全名Virtual Private Network&#xff0c;虚拟专用网&#xff0c;就是利用开放的公众网络&#xff0c;建立专用数据传输通道&#xff0c…

无人机航迹规划:六种最新智能优化算法(DBO、LO、SWO、COA、LSO、KOA)求解无人机路径规划MATLAB

一、六种算法&#xff08;DBO、LO、SWO、COA、LSO、KOA&#xff09;简介 1、蜣螂优化算法DBO 蜣螂优化算法&#xff08;Dung beetle optimizer&#xff0c;DBO&#xff09;由Jiankai Xue和Bo Shen于2022年提出&#xff0c;该算法主要受蜣螂的滚球、跳舞、觅食、偷窃和繁殖行为…

《荒野大镖客》游戏emp.dll丢失的修复方法,快速解决找不到emp.dll问题

《荒野大镖客》是一款备受玩家喜爱的开放世界冒险游戏&#xff0c;然而&#xff0c;有些玩家在游戏中可能会遇到emp.dll文件丢失的问题。emp.dll文件丢失是一个比较常见的问题&#xff0c;它会导致电脑系统出现各种异常情况&#xff0c;比如程序无法正常运行、弹出错误提示等。…

电脑上使用的待办事项便签工具选择哪一款?

电脑是日常办公中必不可少的工具&#xff0c;每一个人每天都要面对纷纷总总的工作待办任务&#xff0c;倘若能当日常工作待办逐一罗列好&#xff0c;提前制定好相关的工作计划后&#xff0c;就可以让各项工作有据可循&#xff0c;在电脑上有哪些可以记录待办事项的工具能实时起…