Vue3-36-路由-路由的元数据信息 meta

什么是 meta

简单的理解,meta 就是路由对象 的一个属性对象
可以 通过这个 属性给 路由对象添加 一些必要的属性值,
在使用路由对象时可以获取到这个属性型对象,从而进行一些其他的逻辑判断。

meta 这个非常的简单,就是一个属性值。

使用案例

给某个路由配置 meta 对象,在 路由的解析守卫 和 组件中 获取meta 中的值。

路由的配置

// 导入 定义路由的两个方法
import {createRouter,createWebHistory}  from 'vue-router'// 引入组件
import componentC from "./componentC.vue";// 声明路由跳转的路径与组件的对应关系
const routsList = [{path:'/c',name:'croute',component:componentC,meta:{meta1 : '元数据1',meta2 : true,meta3 : 1000}}]// 创建路由的实例对象
const routerConfigObj = createRouter({history:createWebHistory('abc'), // 带一个参数,表示是路由的一个前缀routes:routsList // 指定路由的配置列表
})// 全局解析守卫
routerConfigObj.beforeResolve((to,from)=>{console.log('解析守卫 : to  : ',to)console.log('解析守卫 :from : ',from)console.log('------')return true
})// 导出路由的对象
export default routerConfigObj;

运行效果

在这里插入图片描述

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

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

相关文章

这几个自学前端/编程的苦,你千万不要吃

作为一个靠自学,不到两年时间就当上前端 Leader,年薪近 30w 的过来人, 今天我给你们分享一些前端自学路上,你会吃的苦,以及如何避免和解决。 这些让你吃苦的地方,是造成你前端学不好、并且学不下去的根本…

深入了解ReadDirectoryChangesW并应用其监控文件目录

简介 监视指定目录的更改,并将有关更改的信息打印到控制台,该功能的实现不仅可以在内核层,在应用层同样可以。程序中使用 ReadDirectoryChangesW 函数来监视目录中的更改,并使用 FILE_NOTIFY_INFORMATION 结构来获取有关更改的信息…

BERT(从理论到实践): Bidirectional Encoder Representations from Transformers【1】

预训练模型:A pre-trained model is a saved network that was previously trained on a large dataset, typically on a large-scale image-classification task. You either use the pretrained model as is or use transfer learning to customize this model to a given t…

Nacos vs. Eureka:微服务注册中心的对比

Nacos vs. Eureka:微服务注册中心的对比 前言: 欢迎来到本篇博客,今天我们将深入研究两个常用的微服务注册中心:Nacos 和 Eureka。微服务架构的兴起使得服务注册中心成为整个体系中不可或缺的一部分,而选择一个适合自己项目的注…

Python中的装饰器

顾名思义,函数装饰器就是对这个函数进行了装饰,比如在函数的前后进行日志打印等。在Python中,装饰器是一种特殊的语法,用于简化函数或方法的定义和调用。装饰器允许你在不修改原始函数代码的情况下,通过在其上应用装饰…

Apple M2 Pro芯片 + docker-compose up + mysql、elasticsearch pull失败问题的解法

背景 (1)从github上git clone了一个基于Spring Boot的Java项目,查看readme,发现要在项目的根目录下,执行“docker-compose up”。(2)执行“docker-compose up”的前提是,在macos上要…

Vue中break关键字

Change() {//每次触发该事件,都要讲data重新赋值一次this.data JSON.parse(JSON.stringify(this.data1));// 根据选中的等级更新数据switch (this.selectedlevel) {case 1:// 更新数据为一级数据this.data this.data.filter(item > item.level "1"…

练习-双指针的使用

目录 前言一、双指针遍历数组1.1 题目一 总结 前言 最近感觉有点疲倦,学习的时间不多,但不想中断写博客的连续,本篇文章就记录一下在写c语言练习过程中利用双指针解题。 一、双指针遍历数组 1.1 题目一 题目:将一个数组中的奇数…

【shell漫步】3 条件分支结构

碎碎念 接上文的运算符的内容,这一章终于开始接触控制结构 【shell漫步】2 运算符-CSDN博客 分支结构的写法 当我们要对不同情况采取不同措施的时候就要用到分支结构 在shell中分支结构的写法如下 if [ 情况1 ] then代码1 elif [ 情况2 ] then代码2 elif [ 情…

mysql四大引擎、账号管理以及建库

目录 一.数据库存储引擎1.1存储引擎的查看1.2InnoDB1.3MyISAM1.4 MEMORY1.5 Archive 二.数据库管理2.1元数据库分类2.2 操作2.3 MySQL库 三.数据表管理3.1三大范式3.2 整形3.3 实数3.4 字符串3.5 text&blob3.6 日期类型3.7 选中标识符 四.数据库账号管理4.1 查询用户4.2查看…

【论文阅读|冷冻电镜】DISCA: High-throughput cryo-ET structural pattern mining

论文题目 High-throughput cryo-ET structural pattern mining by unsupervised deep iterative subtomogram clustering 摘要 现有的结构排序算法的吞吐量低,或者由于依赖于可用模板和手动标签而固有地受到限制。本文提出了一种高吞吐量的、无需模板和标签的深度…

Kotlin协程学习之-01

由于协程需要支持挂起、恢复、因此对于挂起点的状态保存就显得机器关键。类似的,线程会因为CPU调度权的切换而被中断,它的中断状态会保存在调用栈当中,因而协程的实现也按照是否开辟相应的调用栈存在以下两种类型: 有栈协程&…

Zookeeper注册中心实战

Java学习手册面试指南:https://javaxiaobear.cn Spring Cloud Zookeeper通过自动配置和绑定到 Spring 环境和其他 Spring 编程模型习惯用法,为 Spring Boot 应用程序提供Apache Zookeeper集成。通过一些简单的注释,您可以快速启用和配置应用…

知识笔记(七十二)———链式语句中table用法

用法 一般情况下,操作模型的时候系统能够自动识别当前对应的数据表,所以,使用table方法的情况通常是为了: 切换操作的数据表;对多表进行操作; 例如: Db::table(think_user)->where(statu…

12.5 【Screen配置】配置winmgr(三)

四,class段 class子段指定了窗口属性的默认值。 Windows 必须与显示器相关联。因此,只有在系统支持显示器,或者系统上有需要显示器的应用程序时,才需要在配置文件中包含此部分。此class部分必须以 begin class class_name 开头并以 end class 结尾。 class子段用于设置该…

c++,mutex,unique_lock,recursive_mutex,shared_mutex对比分析

当处理多线程并发时&#xff0c;正确使用锁是确保线程安全的关键。 1. std::mutex&#xff08;互斥锁&#xff09;&#xff1a; std::mutex 是C标准库提供的最基本的锁。它的基本使用如下&#xff1a; #include <iostream> #include <mutex> #include <threa…

电池管理系统中算法的多种算法融合介绍

BMS电池管理系统 是一种用于电池组中的单个电池管理的系统&#xff0c;以确保其安全性、寿命和性能。BMS系统通过采集电池信息并对其进行分析&#xff0c;以确保电池组的正常运行。在BMS电池管理系统中&#xff0c;涉及到了许多算法&#xff0c;包括最大功率点追踪算法、SOC计算…

【RK3399 PCIE调试——硬件信息资源获取】

一、1、 硬件接口 二、2、 PCB原理图 三、 官网地址&#xff1a; https://t.rock-chips.com/portal.php 相关资料和固件烧写可参考资料下载菜单

WPF 使用矢量字体图标

矢量字体图标 在WPF项目中经常需要显示图标&#xff0c;但是项目改动后&#xff0c;有时候需要替换和修改图标&#xff0c;这样非常麻烦且消耗开发和美工的时间。为了快速开发项目&#xff0c;节省项目时间&#xff0c;使用图标矢量字体图标是一个非常不错的选择。 矢量字体图标…

基于数学形态学的点云强度均衡滤波

目录 一、相关介绍 二、相关原理 三、实现代码 四、运行结果 一、相关介绍 点云的强度应该是叫做反射率,在软件处理层面主要是靠点云的xyz坐标,以及时间特征来做识别,而如果有了RGB,反射率等辅助信息,识别的效率和精确度会大大提升。 在点云数据无RGB色彩信息的情况下,…