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

Vue前端开发-路由跳转及带参数跳转

在Vue 3中,由于没有实例化对象this,因此,无法通过this去访问 $route对象,而是通过导入一个名为 useRouter 的方法,执行这个方法后,返回一个路由对象,通过这个路由对象就可以获取到当前路由中的信息,包括参数的读取,接下来进行详细说明。

路由跳转

除了通过a标签进行路由跳转之外,还可以使用router-link标签实现跳转功能,它是一个全局的组件,可以直接在template 中使用,无需导入,编译后自动转成一个a标签,但它的功能比a标签更加灵活,直接在当前页中进行路由跳转,不会刷新页面,如下列代码:

<router-link to="/list">学校首页</router-link>

它等价于如下代码:

<a href="/list">学校首页</a>

除使用超级链接标签进行路由跳转外,还可以在代码中,通过路由对象 router进行页面之前的相互跳转,在模板中的如下代码所示:

<div @click="router.push({name:'list'})">学校首页
</div>

其中,router 对象必须先导入,再调用,才能在模板中直接使用,代码如下所示:

import {useRouter} from "vue-router"
export default {name: "App",data(){return{router:useRouter()}}
}

**注意:**从路由模块中导入的必须是useRouter 方法,只有在调用这个方法之后的 router对象中才可以使用push方法,push方法的本质是向当前的路由栈中再添加一个新的路由记录,并根据这个记录进行路由切换,从而实现页面跳转的功能。

带参数跳转

在路由跳转时,还可以携带参数进入目标页,跳转标签和方式不同,携带参数的格式也不一样,如果是一个a标签携带参数跳转,那么它的携带参数的格式如下代码所示:

  <a href="/list?gradeId=1001">一年级</a>

上述代码采用查询字符串方式携带参数,即问号后携带参数,还可以在路径中使用配置项指定的格式携带参数,如下代码所示:

  <a href="/list/1001">一年级</a>

上述代码中,/1001是配置时指定的格式,1001是一个名为gradeId的变量值,这个带参数跳转方式需要在路由配置中设置,代码如下所示:

{path: '/list/:gradeId',name: 'list2',component: () => import('../views/list.vue')}

在上述代码中,path属性设置路径时,可以通过变量gradeId带参数跳转,这样设置后,在目标页中,就可以通过路由对象中的 params.gradeId格式获取到携带的参数。

除使用a标签携带参数跳转外,还可以使用 router-link 和其他标签携带参数跳转,如果是router-link,那么,它的跳转格式如下代码所示:

 <router-link :to="{name: 'list2',params: {gradeId: 1001}}">一年级</router-link>

如果是其他的元素,由于没有to或href属性,只能调用单击事件进行携带参数的跳转,上述代码改成 div标签跳转,则修改后的代码如下所示:

<div @click="router.push({name: 'list2',params: {gradeId: 1001}})">一年级</div>

在这里插入图片描述

相关文章:

Vue前端开发-路由跳转及带参数跳转

在Vue 3中&#xff0c;由于没有实例化对象this&#xff0c;因此&#xff0c;无法通过this去访问 $route对象&#xff0c;而是通过导入一个名为 useRouter 的方法&#xff0c;执行这个方法后&#xff0c;返回一个路由对象&#xff0c;通过这个路由对象就可以获取到当前路由中的信…...

服务器上安装 Node.js

在服务器上安装 Node.js 的过程根据你使用的操作系统和环境可能会有所不同。以下是一些常见的 Linux 发行版&#xff08;如 Ubuntu 或 CentOS&#xff09;上的安装步骤。 在基于 Red Hat/CentOS 的系统上安装 Node.js 设置 EPEL 仓库 如果没有启用 EPEL (Extra Packages for E…...

在阿里云/Linux环境搭建Gitblit服务

在阿里云/Linux环境搭建Gitblit服务 1. 整体描述2. 前期准备3. 安装步骤3.1 下载gitblit3.2 上传gitblit3.3 解压文件3.4 修改文件配置3.5 启动gitblit3.6 安全组配置 4. 总结 1. 整体描述 前段时间买了一个阿里云服务器&#xff0c;2核2G&#xff0c;3M固定带宽的配置&#x…...

MicroBlaze软核开发(二):GPIO

实现功能&#xff1a;使用 MicroBlaze软核&#xff0c;配置GPIO用拨码开关控制LED灯 Vivado版本&#xff1a;2018.3 目录 引言 vivado部分&#xff1a; 一、配置GPIO 二、生成HDL文件编译 SDK部分&#xff1a; 一、导出硬件启动SDK 二、新建应用程序工程 三、编写程序代…...

threejs相机辅助对象cameraHelper

为指定相机创建一个辅助对象&#xff0c;显示这个相机的视锥。 想要在场景里面显示相机的视锥&#xff0c;需要创建两个相机。 举个例子&#xff0c;场景中有个相机A&#xff0c;想要显示相机A的视锥&#xff0c;那么需要一个相机B&#xff0c;把B放在A的后面&#xff0c;两个…...

Luma 视频生成 API 对接说明

Luma 视频生成 API 对接说明 随着 AI 的应用变广&#xff0c;各类 AI 程序已逐渐普及。AI 已逐渐深入到人们的工作生活方方面面。而 AI 涉及的行业也越来越多&#xff0c;从最初的写作&#xff0c;到医疗教育&#xff0c;再到现在的视频。 Luma 是一个专业高质量的视频生成平…...

服务器数据恢复—EVA存储硬盘磁头和盘片损坏离线的数据恢复案例

服务器存储数据恢复环境&故障&#xff1a; 一台HP EVA存储中有23块硬盘&#xff0c;挂接到一台windows server操作系统的服务器。 EVA存储上有三个硬盘指示灯亮黄灯&#xff0c;此刻存储还能正常使用。管理员在更换硬盘的过程中&#xff0c;又出现一块硬盘对应的指示灯亮黄…...

【Python】深入探索Python类型检查:掌握 `typing` 模块的高级用法

解锁Python编程的无限可能:《奇妙的Python》带你漫游代码世界 随着代码复杂度的增加,类型安全性在现代开发中变得尤为重要。Python自3.5引入类型提示(type hints),为开发者提供了静态类型检查的能力,而typing模块则是这一系统的核心。本篇文章深入研究Python的类型提示及…...

Android学习15--charger

1 概述 最近正好在做关机充电这个&#xff0c;就详细看看吧。还是本着保密的原则&#xff0c;项目里的代码也不能直接用&#xff0c;这里就用的Github的。https://github.com/aosp-mirror 具体位置是&#xff1a;https://github.com/aosp-mirror/platform_system_core/tree/mai…...

顶会新宠!KAN-LSTM完美融合新方案

2024深度学习发论文&模型涨点之——KANLSTM KAN-LSTM混合预测模型是一种结合了自注意力机制&#xff08;KAN, Key-attention network&#xff09;和长短时记忆网络&#xff08;LSTM&#xff09;的深度学习模型&#xff0c;主要用于序列数据的预测任务&#xff0c;如时间序…...

JS中对象的浅拷贝,深拷贝和引用

JS中对象的浅拷贝&#xff0c;深拷贝和引用 浅拷贝和深拷贝的区别主要在于它们如何处理引用类型的数据&#xff08;如数组和对象&#xff09;&#xff0c;而引用简而言之就是换了个变量名。 浅拷贝 引用&#xff1a;浅拷贝只复制对象的第一层属性&#xff0c;对于嵌套的对象或…...

思普企业运营平台 idsCheck Sql注入漏洞复现

0x01 产品描述: ‌思普企业运营平台‌是由贵阳思普信息技术有限公司自主研发的国内首款投融建管营云服务平台——...

FSWIND脉动风-风载时程生成器软件下载、安装及注册

1、软件下载 点击文末超链接下载 2、软件安装 以下操作&#xff0c;若被电脑杀毒软件提示风险&#xff0c;请加入白名单&#xff0c;软件无任何病毒和后台&#xff0c;请放心使用&#xff01; 1&#xff09;双击Fswind_setup.exe&#xff0c;启动安装程序 2&#xff09;、点…...

spring通过RequestContextHolder获取HttpServletRequest对象

1.获取HttpServletRequest对象方法&#xff1a; public static HttpServletRequest getRequest() {ServletRequestAttributes attributes ((ServletRequestAttributes) RequestContextHolder.getRequestAttributes());assert attributes ! null;return attributes.getRequest(…...

STM32编码器接口及编码器测速模板代码

编码器是什么&#xff1f; 编码器是一种将角位移或者角速度转换成一连串电数字脉冲的旋转式传感 器&#xff0c;我们可以通过编码器测量到底位移或者速度信息。编码器从输出数据类型上 分&#xff0c;可以分为增量式编码器和绝对式编码器。 从编码器检测原理上来分&#xff0…...

qt QNetworkAccessManager详解

1、概述 QNetworkAccessManager是QtNetwork模块中的一个核心类&#xff0c;它允许应用程序发送网络请求并接收响应。该类是网络通信的基石&#xff0c;提供了一种方便的方式来处理常见的网络协议&#xff0c;如HTTP、HTTPS等。QNetworkAccessManager对象持有其发送的请求的通用…...

部署 Vue 前端项目到 Linux

看看怎么把一个 Vue 3 项目部署到 Linux 服务器上。准备好你的咖啡&#xff0c;让我们愉快地度过这段部署时光&#xff01; 前期准备 确保你已经在本地构建了 Vue 3 项目&#xff0c;并生成了 dist 文件夹。 npm run build构建完成后&#xff0c;你将看到一个新鲜出炉的 dis…...

数据分析:探索数据背后的秘密与挑战

在当今这个数据驱动的时代&#xff0c;数据分析已成为各行各业不可或缺的一部分。从市场营销到金融风控&#xff0c;从医疗健康到智能制造&#xff0c;数据分析为企业决策提供了强有力的支持。然而&#xff0c;尽管其重要性日益凸显&#xff0c;数据分析的过程并非一帆风顺&…...

文本域设置高度 加上文字限制并show出来:

文本域设置高度 :rows"4" 加上文字限制并show出来&#xff1a; maxlength"30" show-word-limit 效果: <el-form-item label"产品备注" prop"remark"><el-input v-model"form.remark" type"textarea"…...

深入浅出:Gin框架-简介与API开发入门

深入浅出&#xff1a;Gin框架-简介与API开发入门 引言 Gin框架是基于Go语言的HTTP Web框架&#xff0c;凭借其简单易用、性能卓越和丰富的功能&#xff0c;成为构建高性能Web应用的理想选择。本文将深入浅出地介绍Gin框架的基础知识&#xff0c;并通过一个简单的案例&#xf…...

Vue记事本应用实现教程

文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展&#xff1a;显示创建时间8. 功能扩展&#xff1a;记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...

React第五十七节 Router中RouterProvider使用详解及注意事项

前言 在 React Router v6.4 中&#xff0c;RouterProvider 是一个核心组件&#xff0c;用于提供基于数据路由&#xff08;data routers&#xff09;的新型路由方案。 它替代了传统的 <BrowserRouter>&#xff0c;支持更强大的数据加载和操作功能&#xff08;如 loader 和…...

【Linux】C语言执行shell指令

在C语言中执行Shell指令 在C语言中&#xff0c;有几种方法可以执行Shell指令&#xff1a; 1. 使用system()函数 这是最简单的方法&#xff0c;包含在stdlib.h头文件中&#xff1a; #include <stdlib.h>int main() {system("ls -l"); // 执行ls -l命令retu…...

MMaDA: Multimodal Large Diffusion Language Models

CODE &#xff1a; https://github.com/Gen-Verse/MMaDA Abstract 我们介绍了一种新型的多模态扩散基础模型MMaDA&#xff0c;它被设计用于在文本推理、多模态理解和文本到图像生成等不同领域实现卓越的性能。该方法的特点是三个关键创新:(i) MMaDA采用统一的扩散架构&#xf…...

unix/linux,sudo,其发展历程详细时间线、由来、历史背景

sudo 的诞生和演化,本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来,让我们拨开时间的迷雾,一同探寻 sudo 那波澜壮阔(也颇为实用主义)的发展历程。 历史背景:su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前,Unix 系统管理员和需要特权操作的…...

JUC笔记(上)-复习 涉及死锁 volatile synchronized CAS 原子操作

一、上下文切换 即使单核CPU也可以进行多线程执行代码&#xff0c;CPU会给每个线程分配CPU时间片来实现这个机制。时间片非常短&#xff0c;所以CPU会不断地切换线程执行&#xff0c;从而让我们感觉多个线程是同时执行的。时间片一般是十几毫秒(ms)。通过时间片分配算法执行。…...

tree 树组件大数据卡顿问题优化

问题背景 项目中有用到树组件用来做文件目录&#xff0c;但是由于这个树组件的节点越来越多&#xff0c;导致页面在滚动这个树组件的时候浏览器就很容易卡死。这种问题基本上都是因为dom节点太多&#xff0c;导致的浏览器卡顿&#xff0c;这里很明显就需要用到虚拟列表的技术&…...

如何在最短时间内提升打ctf(web)的水平?

刚刚刷完2遍 bugku 的 web 题&#xff0c;前来答题。 每个人对刷题理解是不同&#xff0c;有的人是看了writeup就等于刷了&#xff0c;有的人是收藏了writeup就等于刷了&#xff0c;有的人是跟着writeup做了一遍就等于刷了&#xff0c;还有的人是独立思考做了一遍就等于刷了。…...

ip子接口配置及删除

配置永久生效的子接口&#xff0c;2个IP 都可以登录你这一台服务器。重启不失效。 永久的 [应用] vi /etc/sysconfig/network-scripts/ifcfg-eth0修改文件内内容 TYPE"Ethernet" BOOTPROTO"none" NAME"eth0" DEVICE"eth0" ONBOOT&q…...

中医有效性探讨

文章目录 西医是如何发展到以生物化学为药理基础的现代医学&#xff1f;传统医学奠基期&#xff08;远古 - 17 世纪&#xff09;近代医学转型期&#xff08;17 世纪 - 19 世纪末&#xff09;​现代医学成熟期&#xff08;20世纪至今&#xff09; 中医的源远流长和一脉相承远古至…...