Vue.js中使用JavaScript实现路由跳转详解

在Vue应用中,利用Vue Router进行页面间的导航是一个常见需求。本篇博客将通过示例代码详细介绍如何在Vue组件中使用JavaScript实现路由跳转,包括传递参数的两种方式:通过paramsquery。让我们一步步深入了解。

基础设置

首先,确保你的项目中已安装并配置了Vue Router。一个基本的Vue Router配置可能如下所示(在router/index.js文件中):

import Vue from 'vue'
import Router from 'vue-router'
import Seq from '@/components/Seq'Vue.use(Router)export default new Router({routes: [{path: '/rd/proj/seq',name: 'Seq',component: Seq},// 其他路由配置...]
})

使用模板内的方法实现跳转

模板部分

在Vue组件的模板中,你可以定义一个按钮,其点击事件会触发一个函数来执行路由跳转。

<template><div><button @click="navigateToSeq">跳转到Seq页面</button></div>
</template>

脚本部分

在脚本部分,我们定义navigateToSeq方法来使用this.$router.push进行路由跳转。这里,我们将展示如何传递参数。

使用params传递参数

如果你希望在URL路径中不显示参数,可以使用params

<script>
export default {methods: {navigateToSeq() {const row = { contractNo: '123' }; // 假设这是从某个地方获取的数据this.$router.push({ name: 'Seq', params: { contractNo: row.contractNo } });}}
}
</script>

注意,使用params时,接收参数需要在目标组件的beforeRouteUpdate钩子或通过this.$route.params.contractNo访问。

使用query传递参数

如果你想在URL中以查询字符串的形式显示参数,应该使用query

<script>
export default {methods: {navigateToSeq() {const row = { contractNo: '123' };this.$router.push({ path: '/rd/proj/seq', query: { contractNo: row.contractNo } });}}
}
</script>

使用query时,可以通过this.$route.query.contractNo获取参数值。

在目标组件中接收参数

接收params

对于通过params传递的参数,在目标组件(Seq.vue)中,你可以在createdmounted生命周期钩子,或者使用watch来监听$route的变化来获取参数。

export default {created() {console.log(this.$route.params.contractNo); // 访问通过params传递的合同编号}
}
接收query

对于query参数,获取方式与params相同:

export default {created() {console.log(this.$route.query.contractNo); // 访问通过query传递的合同编号}
}

通过上述步骤,你可以在Vue应用中灵活地使用JavaScript实现页面之间的路由跳转及参数传递,无论是隐藏在URL中的参数还是直接展现在查询字符串中的参数,都能轻松应对。

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

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

相关文章

Python图形界面(GUI)Tkinter笔记(目录)

【1】Python图形界面(GUI)Tkinter笔记&#xff08;一&#xff09;&#xff1a;根窗口的创建 【2】Python图形界面(GUI)Tkinter笔记&#xff08;二&#xff09;&#xff1a;标签Label的基本应用 【3】Python图形界面(GUI)Tkinter笔记&#xff08;三&#xff09;&#xff1a;控…

2024年4月24日华为春招实习试题【三题】-题目+题解+在线评测,2024.4.24,华为机试

2024年4月24日华为春招实习试题【三题】-题目题解在线评测&#xff0c;2024.4.24&#xff0c;华为机试 &#x1f3e9;题目一描述&#xff1a;输入格式输出格式样例1样例2样例3数据范围解题思路一&#xff1a;dfs解题思路二&#xff1a;直接二分查找哇&#xff01;解题思路三&am…

队列:动物收养所

问题 题目描述 有家动物收容所只收留猫和狗&#xff0c;但有特殊的收养规则。收养人有两种收养方式:第一种为直接收养所有动物中最早进入收容所的。第二种为选择收养的动物类型(猫或狗)&#xff0c;并收养该种动物中最早进入收容所的。给定一个操作序列代表所有事件。 若第一个…

实验室一块GPU都没有?这个云平台直接送4090免费无门槛代金券!

你有没有一些年代久远的老照片&#xff0c;或是网络下载的图片和视频&#xff0c;低分辨率、模糊还有噪点&#xff0c;如果能一键修复成高清就好了&#xff01;现在在AI算法工程师圈子里很火的GpuMall智算云&#xff0c;上面的镜像可以一键帮你修复照片&#xff01;比如我们用R…

【碳化硅】陷阱(traps)对SiC MOSFET阈值电压漂移的影响

这篇文章是关于硅碳化物(SiC)金属氧化物半导体场效应晶体管(MOSFET)的阈值电压漂移问题的研究。文章的主要目的是通过研究不同的陷阱(traps)对阈值电压漂移的影响,来解决SiC MOSFET的可靠性问题。 摘要(Abstract) 文章提出了一种研究方法,用于分析影响SiC MOSFET阈值…

LabVIEW学习记录4-局部变量、全局变量、共享变量

【LabVIEW】局部变量、全局变量、共享变量 一、变量定义二、内存分配三、竞争状态四、变量创建及简单使用示例4.1 局部变量4.1.1 局部变量的创建4.1.2 局部变量的编程实例 4.2 全局变量4.2.1 创建4.2.2 调用4.2.3 编程实例 4.3 共享变量 一、变量定义 LabVIEW&#xff08;Labor…

【Web后端】servlet基本概念

1.ServletAPI架构 HttpServlet继承GenericServletGenericServlet实现了Servlet接口&#xff0c;ServletConfig接口,Serializable接口自定义Servlet继承HttpServlet 2.Servlet生命周期 第一步&#xff1a;容器加载Servlet第二步&#xff1a;调用Servlet的无参构造方法&#xf…

【生信技能树】数据挖掘全流程

R包的安装&#xff0c;每次做分析的时候先运行这段代码把R包都安装好了&#xff0c;这段代码不需要任何改动&#xff0c;每次分析直接运行。 options("repos""https://mirrors.ustc.edu.cn/CRAN/") if(!require("BiocManager")) install.packag…

Spring Data JPA + Hibernate + Mysql

Hibernate是一个开源的对象关系映射(ORM)框架&#xff0c;国外使用比较多&#xff0c;国内主要使用的mybatis。 JPA&#xff0c;Spring Data JPA和Hibernate JPA只是一个ORM框架的规范, 对该规范的实现比较完整就是Spring Data JPA&#xff08;底层基于Hibernate实现&#xff…

TFS(淘宝分布式存储引擎

TFS&#xff08;淘宝分布式存储引擎&#xff09; 什么是TFS&#xff1f; ​ 根据淘宝2016年的数据分析&#xff0c;淘宝卖家已经达到900多万&#xff0c;有上十亿的商品。每一个商品有包括大量的图片和文字(平均&#xff1a;15k)&#xff0c;粗略估计下&#xff0c;数据所占的…

IaC实战指南:DevOps的自动化基石

基础设施即代码&#xff08;Infrastructure as Code&#xff0c;IaC&#xff09;是指利用脚本、配置或编程语言创建和维护基础设施的一组实践和流程。通过IaC&#xff0c;我们可以轻松测试各个组件、实现所需的功能并在最小化停机时间的前提下进行扩展。更值得一提的是&#xf…

ETLCloud中如何执行Java Bean脚本

ETLCloud中如何执行Java Bean脚本 在ETLCloud这一强大的数据集成和转换平台中&#xff0c;执行Java Bean脚本的能力为其增添了更多的灵活性和扩展性。Java Bean脚本不仅仅是一段简单的代码&#xff0c;而是一种强大的工具&#xff0c;可以帮助用户定制和优化数据处理的每一个环…

按键配合LDO实现开关功能

今天给大家分享一个学到的按键开关电路&#xff0c;适合没有足够空间给自锁开关的场景&#xff0c;既可以用于USB供电控制也可以用于电池供电控制。话不多说上电路图先。 核心任务就是通过按键控制LDO芯片的使能管脚的电平状态&#xff0c;这枚NCP芯片高电平使能&#xff0c;VB…

数学建模速成

建模手&#xff1a; 清风 【【强烈推荐】清风&#xff1a;数学建模算法、编程和写作培训的视频课程以及Matlab等软件教学】https://www.bilibili.com/video/BV1DW411s7wi?vd_sourcedb98a5294f4e914ff8d9b0cad1ee6bda 【【数学建模模型算法速成&#xff08;Matlab/Python双语…

Python图形界面(GUI)Tkinter笔记(三):控件的定位(1)

Tkinter(GUI)设计图形界面时有三种控件的包装方法去定位各控件在窗口(父容器、根窗口)上的位置。 【1】pack()方法:用方位来定位位置,类似于Word文档中的文字对齐方式。 【2】grid()方法:用二维表格式的坐标值定位,类似于EXCEL单位元。 【3】place()方法:用窗口的像…

代码随想录算法训练营第四十五天|70. 爬楼梯 (进阶)、322. 零钱兑换、279.完全平方数

70. 爬楼梯 &#xff08;进阶&#xff09; 思路&#xff1a; 我们之前做的 爬楼梯 是只能至多爬两个台阶。 这次改为&#xff1a;一步一个台阶&#xff0c;两个台阶&#xff0c;三个台阶&#xff0c;.......&#xff0c;直到 m个台阶。问有多少种不同的方法可以爬到楼顶呢&a…

Q1季度空气净化器行业线上市场(京东天猫淘宝)销售数据分析

随着人们对健康生活方式的追求&#xff0c;以及消费升级的推动&#xff0c;空气净化器市场正在逐步恢复增长态势。 根据鲸参谋数据显示&#xff0c;今年Q1季度空气净化器在线上市场&#xff08;京东天猫淘宝&#xff09;综合销量超90万件&#xff0c;同比去年增长4%&#xff1…

【Java orm 框架比较】十一 新增 原生jdbc对比

迁移到&#xff08;https://gitee.com/wujiawei1207537021/spring-orm-integration-compare&#xff09; orm框架使用性能比较 比较mybatis-plus、lazy、sqltoy、mybatis-flex、easy-query、mybatis-mp、jpa、dbvisitor、beetlsql、dream_orm、wood、hammer_sql_db、原生jdbc…

应用访问多个DB的方法

应用开发一般情况只会使用一个DB视图(多DB集群同步复制的可以视为一个DB&#xff0c;它们之间的数据同步策略可以由DBA来配置&#xff0c;跟开发人员无关)&#xff0c;如果需要访问其他应用的DB&#xff0c;不建议直接连到DB操作&#xff0c;而是通过封装好的web服务接口来访问…

1055: 邻接矩阵到邻接表

解法&#xff1a; #include<iostream> using namespace std; int arr[100][100]; int main() {int n;cin >> n;for (int i 0; i < n; i) {for (int j 0; j < n; j) {cin >> arr[i][j];}}for (int i 0; i < n; i) {for (int j 0; j < n; j) …