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界面设置两个按键,并直接转到槽函数 二、两种代码展示 #include <QFile> #include <QDebug>//此两种方式中调用函数,应包含的头文件void Widget::on_btnReadFile01_clicked()//第一种打开方式 {//1. 打开文件QFile file;file.setFile…...
第三部分:4---进程地址空间
目录 数组的空间分配解析: 物理地址和虚拟地址: 虚拟地址空间: 进程地址空间的本质: 为什么要有进程地址空间? 页表对进程访问内存的检查: 进程地址空间和页表如何关联起来? 进程的独立…...
【Android】程序开发组件—探究Jetpack
引言 Jetpack是一个开发组件工具集,它的主要目的是帮助我们编写出更加简洁的代码,并简化我们的开发过程,在这么多的组件当中,最需要我们关注的其实还是架构组件,接下来就对Jetpack的主要架构组件进行学习!…...
pytorch torch.norm函数介绍
torch.norm 函数用于计算张量的范数(norm),可以理解为张量的“长度”或“大小”。根据范数的不同类型,它可以衡量不同的张量性质。该函数可以计算 向量 和 矩阵 的多种范数,如 L1范数、L2范数、无穷范数 等。 1. 函数…...
【lc_hot100】刷题心得
链表 二叉树 二叉树相关的题目基本都有个基本的框架,基本框架就是二叉树的四种遍历方法:前序遍历、中序遍历、后序遍历、层序遍历 往往常用的是前序遍历和中序遍历 图 图跟二叉树一样都有自己的的基本框架,基本框架就是图的两种遍历方法&am…...
FANUC 数控 A06B-6058-H227 伺服放大器
发那科伺服放大器是一种控制电机的电子装置,属于电机控制系统的一部分,用于将输入信号放大并转换成电动机可以理解的信号,从而实现运动控制和定位。 发那科伺服放大器的主要作用包括: 实现运动控制:通过控制…...
Python将表格文件中某些列的数据整体向上移动一行
本文介绍基于Python语言,针对一个文件夹下大量的Excel表格文件,对其中的每一个文件加以操作——将其中指定的若干列的数据部分都向上移动一行,并将所有操作完毕的Excel表格文件中的数据加以合并,生成一个新的Excel文件的方法。 首…...
基于YOLOv8的PCB缺陷检测算法,加入一种基于内容引导注意力(CGA)的混合融合方案(一)
💡💡💡本文内容:针对基于YOLOv8的PCB缺陷检测算法进行性能提升,加入各个创新点做验证性试验。 1)提出了一种基于内容引导注意力(CGA)的混合融合方案,mAP0.5由原始的0.966提升至0.975 1.PCB缺陷…...
如何在红米手机中恢复已删除的照片?(6 种方式可供选择)
凭借出色的相机和实惠的价格,小米红米系列已成为全球知名品牌。但是,最近有些人抱怨他们在 红米设备上丢失了许多珍贵的图片或视频,并希望弄清楚如何从小米手机恢复已删除的照片。好吧,在小米设备上恢复已删除的视频/照片并不难。…...
2026年必看:专业婚恋软件推荐,找到真爱不迷路
在当今快节奏的社会中,越来越多的高知青年面临着交友难、脱单难的问题。传统的社交方式往往难以满足他们对高质量伴侣的需求,而专业的婚恋软件则成为他们寻找真爱的重要途径。本文将重点推荐一款备受好评的婚恋软件——即恋App,并结合具体数据…...
Linux文件系统架构与缓存机制解析
Linux文件系统架构与缓存机制深度解析1. 文件系统核心架构1.1 文件系统基本组织形式Linux文件系统采用分层结构设计,主要包含以下核心组件:块存储机制:硬盘被划分为固定大小的块(默认4KB),文件数据分散存储…...
轻量级AI写作工坊:OpenClaw+nanobot内容创作流
轻量级AI写作工坊:OpenClawnanobot内容创作流 1. 为什么需要自动化写作助手 作为一名技术博主兼自媒体运营者,我每天都要面对内容创作的"三重压力":选题焦虑、写作耗时、发布繁琐。最痛苦的是,当我花两小时写完一篇技…...
MicroOS:Arduino轻量级任务调度内核详解
1. MicroOS:面向Arduino的轻量级任务管理内核概述MicroOS是一个专为Arduino平台设计的极简型实时任务管理器,其核心定位并非替代FreeRTOS或Zephyr等完整RTOS,而是填补Arduino原生loop()单线程模型在多任务调度、精确定时与事件解耦方面的空白…...
80+经典游戏的现代救赎:WidescreenFixesPack让老游戏焕发新生
80经典游戏的现代救赎:WidescreenFixesPack让老游戏焕发新生 【免费下载链接】WidescreenFixesPack Plugins to make or improve widescreen resolutions support in games, add more features and fix bugs. 项目地址: https://gitcode.com/gh_mirrors/wi/Widesc…...
AI大模型岗位薪资揭秘:2026大模型岗位薪资,非常详细收藏我这一篇就够了
1. AI系统架构师 薪资范围:100万 - 200万/年 职位要求:需要具备全面的技术背景,精通系统架构设计,能够有效整合AI技术,提升系统性能。要求硕士及以上学历,计算机科学或相关专业背景。 目标院校࿱…...
别再让PowerBI报告挤成一团了!用按钮+书签,一个页面搞定趋势和明细分析
PowerBI交互设计进阶:用按钮与书签打造空间魔术 当业务分析报告遇上数据爆炸时代,信息过载与界面拥挤成为每个分析师挥之不去的噩梦。我曾见过某零售企业的季度分析仪表板——12个图表密密麻麻挤在A4纸大小的画布上,趋势线相互缠绕ÿ…...
IPD实战指南:CBB模块化设计如何加速产品创新与资源整合
1. CBB模块化设计的本质与价值 第一次接触CBB这个概念时,我正负责一款智能家居产品的研发。当时团队为了赶进度,每个新产品都从零开始设计电路板,结果发现80%的功能模块都是重复的。这种低效的开发方式让我开始思考:能不能像搭积木…...
Ubuntu系统下Intel D405深度相机与Realsense-viewer的初次邂逅与配置实战
1. 开箱初体验:Intel D405深度相机的硬件揭秘 第一次拿到Intel D405深度相机时,那个黑色包装盒比想象中要小巧。拆开包装后,你会看到相机本体、USB数据线和几份纸质文档。相机重量约100克,尺寸和一副扑克牌相当,非常适…...
ImageMagick安装后报错‘vcomp140.dll缺失’?手把手教你彻底解决Visual C++依赖问题
ImageMagick安装后报错‘vcomp140.dll缺失’?手把手教你彻底解决Visual C依赖问题 当你兴冲冲下载完ImageMagick准备大展身手时,命令行却突然弹出一串红色错误提示——"无法启动程序,因为计算机中丢失vcomp140.dll"。这种场景对于…...
