当前位置: 首页 > news >正文

vue-router 之如何在模版(template)中获取路由配置信息?

vue-router 之如何在模版(template)中获取路由配置信息?

获取当前路由信息

在vue3 中,route通常使用useRoute()钩子获取的,**代表当前激活的路由信息。**它包含了与当前路由相关的数据,比如路径、参数、查询字符串、路由名称等。

route = useRoute()返回的是一个响应式对象,对象的属性包括:
path:当前路由的路径;
params:路由参数;
query:查询字符串参数;
name:路由的名称;
fullpath:完整的路径字符串,包含查询参数和哈希。

import { useRoute } from 'vue-router'
const route = useRoute()

获取路由配置

router.options.routes是在路由实例中的访问路由配置的方式,但是在 Vue Router 4.x 中不推荐使用。

import { useRouter } from 'vue-router'
const ruoter = useRouter()
const routes = router.options.routes()

当前推荐使用在创建路由实例router时,将路由配置导出保存,之后使用时直接引入访问。

import routes from  '../../router/route.js'
console.log(routes)

输出打印如下:
在这里插入图片描述

相关文章:

vue-router 之如何在模版(template)中获取路由配置信息?

vue-router 之如何在模版(template)中获取路由配置信息? 获取当前路由信息 在vue3 中,route通常使用useRoute()钩子获取的,**代表当前激活的路由信息。**它包含了与当前路由相关的数据,比如路径、参数、查…...

HPL 源码结构分析

文件夹结构: $ cd /home/hipper/ex_hpl_hpcg/ $ pwd $ mkdir ./openmpi $mkdir ./openblas $mkdir ./hpl $ tree 1. 安装openmpi 1.1.1 使用Makefile下载配置编译安装 openmpi Makefile: all:wget https://download.open-mpi.org/release/open-m…...

Java代码审计篇 | ofcms系统审计思路讲解 - 篇3 | 文件上传漏洞审计

文章目录 0. 前言1. 文件上传代码审计【有1处】1.1 可疑点1【无漏洞】1.1.1 直接搜索upload关键字1.1.2 选择第一个,点进去分析一下1.1.3 分析this.getFile()方法1.1.4 分析new MultipartRequest(request, uploadPath)1.1.5 分析isSafeFile()方法1.1.6 分析request.…...

【Kubernetes】常见面试题汇总(五)

目录 13.简述 Kubernetes Replica Set 和 Replication Controller 之间有什么区别? 14.简述 kube-proxy 作用? 15.简述 kube-proxy iptables 原理? 16.简述 kube-proxy ipvs 原理? 13.简述 Kubernetes Replica Set 和 Replicat…...

MySQL 解决时区相关问题

在使用 MySQL 的过程中,你可能会遇到时区相关问题,比如说时间显示错误、时区不是东八 区、程序取得的时间和数据库存储的时间不一致等等问题。其实,这些问题都与数据库时区设 置有关。 MySQL Server 中有 2 个环境变量和时区有关,…...

SpringSecurity Context 中 获取 和 更改 当前用户信息的问题

SpringSecurity Context 获取和更改用户信息的问题 SecurityContext 异步线程中获取用户信息 今天在做项目时遇到了一个问题,我需要获取当前用户的 ID。之前,前端并没有存储用户信息,我一直是在后端的 service 中通过 SecurityContext 来获…...

Makefile的四种赋值运算符

Makefile有四种赋值运算符:简单赋值(:)、递归赋值()、条件赋值(?)和追加赋值() 1. 简单赋值(:) 作用:覆盖之前的值。若在多次简单赋…...

framebuffer

framebuffer:帧缓冲、帧缓存 Linux内核为显示提供的一套应用程序接口(驱动内核支持) 分辨率:像素点的总和 像素点: 显示屏:800*600(横向有800个像素点,纵向有600个像素点&#x…...

7.科学计算模块Numpy(4)ndarray数组的常用操作(二)

引言 书接上回,numpy能作为python中最受欢迎的数据处理模块,脱离不了它最核心的部件——ndarray数组。那么,我们今天就来了解一下numpy中对ndarray的常用操作。 通过阅读本篇博客,你可以: 1.掌握ndarray数组的分割 …...

抖音评论区截流脚本软件详细使用教学,抖音私域获客引流的五种方法。

1.先说下什么是抖音截流玩法,截流顾名思义就是在别的博主的视频下面去截流评论潜在流量,然后用评论文案的形式或者其它方式吸引用户加我们的私域~ 玩截流一定不是主动去私信别人,这个就不叫截流了,且一个账号私信多了一定会降权和…...

Linux_kernel移植uboot07

一、移植 根据硬件平台的差异,将代码进行少量的修改,修改过后的代码在目标平台上运行起来 移植还需要考虑硬件环境,驱动只需要考虑内核的环境 二、移植内容 1、移植Uboot uboot属于bootloader的一种,还有其他的bootloader&#x…...

Day-04-QFile打开文件的两种方式

一、UI界面设置两个按键&#xff0c;并直接转到槽函数 二、两种代码展示 #include <QFile> #include <QDebug>//此两种方式中调用函数&#xff0c;应包含的头文件void Widget::on_btnReadFile01_clicked()//第一种打开方式 {//1. 打开文件QFile file;file.setFile…...

第三部分:4---进程地址空间

目录 数组的空间分配解析&#xff1a; 物理地址和虚拟地址&#xff1a; 虚拟地址空间&#xff1a; 进程地址空间的本质&#xff1a; 为什么要有进程地址空间&#xff1f; 页表对进程访问内存的检查&#xff1a; 进程地址空间和页表如何关联起来&#xff1f; 进程的独立…...

【Android】程序开发组件—探究Jetpack

引言 Jetpack是一个开发组件工具集&#xff0c;它的主要目的是帮助我们编写出更加简洁的代码&#xff0c;并简化我们的开发过程&#xff0c;在这么多的组件当中&#xff0c;最需要我们关注的其实还是架构组件&#xff0c;接下来就对Jetpack的主要架构组件进行学习&#xff01;…...

pytorch torch.norm函数介绍

torch.norm 函数用于计算张量的范数&#xff08;norm&#xff09;&#xff0c;可以理解为张量的“长度”或“大小”。根据范数的不同类型&#xff0c;它可以衡量不同的张量性质。该函数可以计算 向量 和 矩阵 的多种范数&#xff0c;如 L1范数、L2范数、无穷范数 等。 1. 函数…...

【lc_hot100】刷题心得

链表 二叉树 二叉树相关的题目基本都有个基本的框架&#xff0c;基本框架就是二叉树的四种遍历方法&#xff1a;前序遍历、中序遍历、后序遍历、层序遍历 往往常用的是前序遍历和中序遍历 图 图跟二叉树一样都有自己的的基本框架&#xff0c;基本框架就是图的两种遍历方法&am…...

FANUC 数控 A06B-6058-H227 伺服放大器

‌发那科伺服放大器是一种控制电机的电子装置&#xff0c;属于电机控制系统的一部分&#xff0c;用于将输入信号放大并转换成电动机可以理解的信号&#xff0c;从而实现运动控制和定位。‌ 发那科伺服放大器的主要作用包括&#xff1a; ‌实现运动控制‌&#xff1a;通过控制…...

Python将表格文件中某些列的数据整体向上移动一行

本文介绍基于Python语言&#xff0c;针对一个文件夹下大量的Excel表格文件&#xff0c;对其中的每一个文件加以操作——将其中指定的若干列的数据部分都向上移动一行&#xff0c;并将所有操作完毕的Excel表格文件中的数据加以合并&#xff0c;生成一个新的Excel文件的方法。 首…...

基于YOLOv8的PCB缺陷检测算法,加入一种基于内容引导注意力(CGA)的混合融合方案(一)

&#x1f4a1;&#x1f4a1;&#x1f4a1;本文内容&#xff1a;针对基于YOLOv8的PCB缺陷检测算法进行性能提升&#xff0c;加入各个创新点做验证性试验。 1&#xff09;提出了一种基于内容引导注意力(CGA)的混合融合方案&#xff0c;mAP0.5由原始的0.966提升至0.975 1.PCB缺陷…...

如何在红米手机中恢复已删除的照片?(6 种方式可供选择)

凭借出色的相机和实惠的价格&#xff0c;小米红米系列已成为全球知名品牌。但是&#xff0c;最近有些人抱怨他们在 红米设备上丢失了许多珍贵的图片或视频&#xff0c;并希望弄清楚如何从小米手机恢复已删除的照片。好吧&#xff0c;在小米设备上恢复已删除的视频/照片并不难。…...

自动化立体仓库堆垛机设计(设计说明书+17张CAD图纸+开题报告+任务书+实习报告+中期检查报告+外文翻译)

自动化立体仓库堆垛机作为现代物流系统的核心设备&#xff0c;其设计需兼顾机械结构强度、运动控制精度与系统稳定性。该设计通过三维建模与力学仿真验证&#xff0c;确保堆垛机在高速运行时的结构可靠性&#xff0c;同时优化货叉伸缩机构与载货台升降导轨的配合间隙&#xff0…...

【AI+教育】告别“硬啃”长文,它把文档直接变成你的专属视频课

在这个信息大爆炸的时代,我们最不缺的就是资料:网盘里屯满的行业报告、收藏了却从未打开的学术论文、买来盖泡面的大部头教材……知识就在那里,但“学进去”实在太难了。 秘塔推出的“今天学点啥”,就是为了解决这个痛点而生的。它的核心逻辑非常简单粗暴:你把看不进去的文…...

手把手教你用Matlab Simulink搭建闭环Buck电路:从PID调参到负载突变分析

从零构建闭环Buck电路&#xff1a;Simulink实战与PID调参全解析 电力电子工程师的日常工作中&#xff0c;Buck降压电路的设计与调试是基础中的基础。但真正让一个新手头疼的&#xff0c;往往不是电路拓扑本身&#xff0c;而是如何通过仿真快速验证设计&#xff0c;特别是当引入…...

MacOS开发环境配置:OpenClaw+GLM-4.7-Flash联调指南

MacOS开发环境配置&#xff1a;OpenClawGLM-4.7-Flash联调指南 1. 为什么选择这个组合&#xff1f; 去年我在做一个自动化文档处理项目时&#xff0c;发现市面上的AI工具要么隐私性不足&#xff0c;要么灵活性太差。直到偶然接触到OpenClaw这个开源框架&#xff0c;才找到了理…...

大厂速报:小红书期权涨麻,字节年终暴击,AI赛道卷疯了

互联网圈没有岁月静好&#xff0c;只有暗潮涌动——大厂裁员传闻从未断档&#xff0c;AI内卷卷到凌晨三点&#xff0c;打工人一边焦虑KPI&#xff0c;一边蹲守大厂福利&#xff0c;有人靠期权实现财富跃迁&#xff0c;有人被组织调整撞个正着。一、核心福利&#xff5c;打工人狂…...

Qwen3-VL-Reranker-8B应用场景:科研数据集图文代码混合检索

Qwen3-VL-Reranker-8B应用场景&#xff1a;科研数据集图文代码混合检索 1. 科研检索的痛点与解决方案 科研工作者在日常研究中经常面临这样的困境&#xff1a;手头有大量包含文本、图像、代码片段的研究资料&#xff0c;想要快速找到相关内容却异常困难。传统的文本检索工具只…...

Local AI MusicGen教育应用:帮助学生理解音乐情绪表达方式

Local AI MusicGen教育应用&#xff1a;帮助学生理解音乐情绪表达方式 1. 引言&#xff1a;当AI成为音乐老师 想象一下&#xff0c;你是一位音乐老师&#xff0c;正在给学生讲解“悲伤”这种情绪在音乐中是如何表达的。传统的教学方式可能是播放一段肖邦的夜曲&#xff0c;或…...

通义千问3-Reranker-0.6B效果惊艳:数学证明步骤间逻辑连贯性重排序

通义千问3-Reranker-0.6B效果惊艳&#xff1a;数学证明步骤间逻辑连贯性重排序 1. 模型介绍与核心能力 通义千问3-Reranker-0.6B是Qwen3 Embedding模型系列的最新成员&#xff0c;专门针对文本重排序任务进行了深度优化。这个6亿参数的模型虽然体积小巧&#xff0c;但在数学证…...

LabVIEW新手避坑指南:用For循环和数组搞定水仙花数,别再手动算啦!

LabVIEW实战&#xff1a;用For循环与数组高效求解水仙花数的5个关键技巧 水仙花数这个经典的编程练习题&#xff0c;在文本编程语言中可能只需十几行代码&#xff0c;但切换到LabVIEW的图形化编程环境时&#xff0c;不少初学者会陷入连线混乱和逻辑纠结。本文将从实际工程视角…...

java自动带注释

...