使用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 || '默认标题'
})
如图:
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手把手教程
个人主页
使用TS进行Vue-Router的Meta类型扩展的更多相关文章
- Vue3: 如何以 Vite 创建,以 Vue Router, Vuex, Ant Design 开始应用
本文代码: https://github.com/ikuokuo/start-vue3 在线演示: https://ikuokuo.github.io/start-vue3/ Vite 创建 Vue ...
- vue router 只需要这么几步
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- Vue.js 2.x笔记:路由Vue Router(6)
1. Vue Router简介与安装 1.1 Vue Router简介 Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,构建单页面应用. Vue Rout ...
- 前端MVC Vue2学习总结(八)——Vue Router路由、Vuex状态管理、Element-UI
一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...
- python 全栈开发,Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)
昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...
- vue router的浏览器跳转行为
最近做的项目中,涉及vue router 路由操作,其操作方法不同,产生的行为亦不同.本文通过对比实验,对其行为进行实验对比及总结,避免混淆. vue router的单页跳转的history模式,类似 ...
- Vue Router的配置
1.beforeEnter function requireAuth (route, redirect, next) { if (!auth.loggedIn()) { redirect({ path ...
- [Vue 牛刀小试]:第十二章 - 使用 Vue Router 实现 Vue 中的前端路由控制
一.前言 前端路由是什么?如果你之前从事的是后端的工作,或者虽然有接触前端,但是并没有使用到单页面应用的话,这个概念对你来说还是会很陌生的.那么,为什么会在单页面应用中存在这么一个概念,以及,前端路由 ...
- Vue Router的官方示例改造
基于Vue Router 2018年8月的官方文档示例,改造一下,通过一个最简单的例子,解决很多初学者的一个困惑. 首先是官方文档示例代码 <!DOCTYPE html> <html ...
- Vue技术点整理-Vue Router
路由 Vue Router 对于单页面应用来说,如果涉及到多个页面的话,就必须要使用到路由,一般使用官方支持的 vue-router 库 一,Vue Router 在项目中的安装引用 1,在页面中使用 ...
随机推荐
- mysql基础_约束
介绍 约束对应的英语单词:constraint,在创建表的时候,我们可以给表中的字段加上一些约束,来保证这个表中数据的完整性.有效性. 约束的作用就是为了保证:表中的数据有效. 类型 非空约束:not ...
- JMeter 线程组之Stepping Thread Group插件
JMeter 线程组之Stepping Thread Group插件 测试环境 apache-jmeter-2.13 插件:https://jmeter-plugins.org/downloads ...
- [Lua][Love Engine] 打砖块游戏实现过程与知识点
本文旨在根据LOVE2D官方文档和教程实现打砖块的游戏,记录部分实现过程和重要知识点 目标摧毁所有砖块 玩家控制球拍左右滑动反弹小球 小球摧毁砖块 小球保持在屏幕内 小球碰到屏幕底部,GAME OVE ...
- 安装iTerm2和oh-my-zsh
安装iTerm2和oh-my-zsh 此文是在参考许多教程(见目录:参考)并结合本人安装经历写下的一篇关于iTerm2和oh-my-zsh的认识和超级详细安装教程.全文所有图片均为本人截屏拍摄.希望能 ...
- API接口的设计思路
API接口设计是软件开发中非常重要的一环,良好的设计规范能够提高开发效率.减少问题和错误,并增强系统的可维护性和可扩展性.本文从程序员的视角,讨论一些常见的API接口设计规范. 一.遵循RESTf ...
- CodeForces 1332D Walk on Matrix
题意 \(Bob\)想解决一个问题:一个\(n\cdot m\)的矩阵,从\((1,1)\)出发,只能走右和下,问从\((1,1)\)到\((n,m)\)的最大\(\&\)和 他的算法如下(\ ...
- Code Llama:Llama 2 学会写代码了!
引言 Code Llama 是为代码类任务而生的一组最先进的.开放的 Llama 2 模型,我们很高兴能将其集成入 Hugging Face 生态系统!Code Llama 使用与 Llama 2 相 ...
- 了解JAVA内存模型(JMM)
1.概述 我们常说的JMM指的是Java内存模型(Java Memory Model,JMM),主要用于控制Java程序解决线程间如何通信和数据同步,JMM规范了多线程访问共享内存时的 可见性.有序性 ...
- 鞭尸没 jj
提前退役了.现在我想说一点无关紧要的闲话. 与其说是 OI 回忆录,不如说是对这主线明确的六年做的一个梳理,倒不一定 OI 强相关. 壹.零度下的相遇 视线就这样交叠 与你 最初接触到 O ...
- 「coci 2021-2022 #1」Logičari
link. 断环后把断的边所连的两个点特殊标记,作为两个特殊点.这样就是一个树,树的做法很简单吧,把两个特殊点特殊处理带进状态即可. 具体一点就是,设 \(f(x,c_x,c_f,c_{rt_1},c ...