vue全家桶进阶之路35:Vue3 传递参数query和params
在 Vue.js 3.x 中,可以通过路由的 params
和 query
属性来传递参数。
- 通过
params
传递参数
我们可以在路由跳转时通过 params
传递参数。具体方法如下:
// 在组件中跳转路由
import { defineComponent } from 'vue'
import { useRouter } from 'vue-router' export default defineComponent({
setup() {
const router = useRouter() const handleClick = () => {
// 传递参数
router.push({ name: 'user', params: { id: 123 } })
} return {
handleClick
}
}
})
在上述示例中,我们在路由跳转时通过 params
传递了一个名为 id
,值为 123
的参数。在接收方的组件中,我们可以通过 $route.params
对象来获取参数,例如:
// 在接收方组件中获取参数
import { defineComponent } from 'vue' export default defineComponent({
setup(props, { route }) {
const id = route.params.id return {
id
}
}
})
在上述示例中,我们通过 $route.params.id
获取了传递过来的 id
参数。
- 通过
query
传递参数
与 params
类似,我们也可以在路由跳转时通过 query
传递参数。具体方法如下:
// 在组件中跳转路由
import { defineComponent } from 'vue'
import { useRouter } from 'vue-router' export default defineComponent({
setup() {
const router = useRouter() const handleClick = () => {
// 传递参数
router.push({ name: 'user', query: { id: 123 } })
} return {
handleClick
}
}
})
在上述示例中,我们在路由跳转时通过 query
传递了一个名为 id
,值为 123
的参数。在接收方的组件中,我们可以通过 $route.query
对象来获取参数,例如:
// 在接收方组件中获取参数
import { defineComponent } from 'vue' export default defineComponent({
setup(props, { route }) {
const id = route.query.id return {
id
}
}
})
在上述示例中,我们通过 $route.query.id
获取了传递过来的 id
参数。需要注意的是,查询参数的值始终为字符串类型,如果需要转换为其他类型,需要手动进行转换。
vue全家桶进阶之路35:Vue3 传递参数query和params的更多相关文章
- Vue 全家桶 + Electron 开发的一个跨三端的应用
代码地址如下:http://www.demodashi.com/demo/11738.html GitHub Repo:vue-objccn Follow: halfrost · GitHub 利用 ...
- Vue全家桶高仿小米商城
大家好,我是河畔一角,时隔半年再次给大家带来一门重量级的实战课程:<Vue全家桶高仿小米商城>,现在很多公司都在参与到商城的构建体系当中,因此掌握一套商城的标准开发体系非常重要:商城的开始 ...
- vue证明题一,vue全家桶的构成
简单说下vue的构成,当然是简单为主,网上这东西满天飞,简单说几句就ok 1.vue是什么 vue读作view,是一种js框架.只关注于视图层,操作内容包括js,html,css 2.vue全家桶是什 ...
- 用 Vue 全家桶二次开发 V2EX 社区
一.开发背景 为了全面的熟悉Vue+Vue-router+Vuex+axios技术栈,结合V2EX的开放API开发了这个简洁版的V2EX. 在线预览 (为了实现跨域,直接npm run dev部署的, ...
- Vue全家桶
简介 “简单却不失优雅,小巧而不乏大匠”. Vue.js 是一个JavaScriptMVVM库,是一套构建用户界面的渐进式框架.它是以数据驱动和组件化的思想构建的,采用自底向上增量开发的设计. 为什么 ...
- 从零开始系列之vue全家桶(3)安装使用vuex
什么是vuex? vuex:Vue提供的状态管理工具,用于同一管理我们项目中各种数据的交互和重用,存储我们需要用到数据对象. 即data中属性同时有一个或几个组件同时使用,就是data中共用的属性. ...
- 使用vue全家桶制作博客网站
前面的话 笔者在做一个完整的博客上线项目,包括前台.后台.后端接口和服务器配置.本文将详细介绍使用vue全家桶制作的博客网站 概述 该项目是基于vue全家桶(vue.vue-router.vuex.v ...
- 转载: 使用vue全家桶制作博客网站 HTML5 移动网站制作的好教程
使用vue全家桶制作博客网站 前面的话 笔者在做一个完整的博客上线项目,包括前台.后台.后端接口和服务器配置.本文将详细介绍使用vue全家桶制作的博客网站 概述 该项目是基于vue全家桶(vue. ...
- Vue全家桶介绍
一直不清楚全家桶是什么玩意,上网搜了一下,才知道就是平时项目中使用的几个依赖包,下面分享一下 Vue 全家桶介绍 Vue有著名的全家桶系列,包含了vue-router(http://router.vu ...
- 一个简单的假vue全家桶(vue+vue-router+require)
首先说明我觉得这是一个比较好理解的vue全家桶(虽然是假的),模块化也是用require来做的,而且如果后期有必要压缩我也会用gulp来做 1.依赖个个本地模块,require只是用来载入page,这 ...
随机推荐
- (转)codeblocks 使用研究
原帖:http://github.tiankonguse.com/blog/2014/10/11/codeblocks-shutcut.html 使用前 使用 codeblocks 前肯定是下载安装 ...
- 详解AQS的7个同步组件
摘要:AQS的全称为Abstract Queued Synchronizer,是在J.U.C(java.util.concurrent)下子包中的类. 本文分享自华为云社区<[高并发]AQS案例 ...
- Python学习笔记--循环的知识以及应用
while循环 代码: 结果: 案例:求1-100的和 实现: 案例:while循环猜数字 实现: while循环的嵌套使用 案例:打印九九乘法表 (注意:要是想要输出不换行,代码可以这样写:prin ...
- GO语言学习笔记-工具链篇 Study for Go ! Chapter eleven - Tool Chain
持续更新 Go 语言学习进度中 ...... GO语言学习笔记-类型篇 Study for Go! Chapter one - Type - slowlydance2me - 博客园 (cnblogs ...
- Hadoop 安装及目录结构
一.准备工作 [1]创建用户:useradd 用户名[2]配置创建的用户具有 root权限,修改 /etc/sudoers 文件,找到下面一行,在root下面添加一行,如下所示:(注意:需要先给sud ...
- 一次spark任务提交参数的优化
起因 新接触一个spark集群,明明集群资源(core,内存)还有剩余,但是提交的任务却申请不到资源. 分析 环境 spark 2.2.0 基于yarn集群 参数 spark任务提交参数中最重要的几个 ...
- Serial port
前言 使用qt开发一款简易串口助手. 目标: 1. 实现正常串口通信. 2. 能够传输AT指令.(需要注意回车符) github仓库地址:shadow-wd/Serial-port-assis ...
- Troubleshooting 专题 - 问正确的问题 得到正确的答案
在很多公司中,IT.数据中心.业务系统一出故障,会有很多人被叫到作战室(就是一个为了解决该问题,而把所有相关人员集中在一起的一个会议室), 但是对于这个问题他们是否可以修复, 是否他们应该负有责任, ...
- 【论文翻译】LORA: LOW-RANK ADAPTATION OF LARGE LANGUAGE MODELS
LORA: LOW-RANK ADAPTATION OF LARGE LANGUAGE MODELS 论文地址:https://arxiv.org/pdf/2106.09685.pdf 代码地址:ht ...
- Barplot/pie/boxplot作图详解——R语言
当数据以简单的可视化的形式呈现时,数据便更具有意义并且更容易理解,因为人眼很难从原始数据中得出重要的信息.因此,数据可视化成为了解读数据最重要的方式之一.条形图和箱线图是了解变量分布的最常用的图形工具 ...