Vue3学习-vue-router之路由传参

传参方案一:RouterLink 字符串

//传值
<RouterLink to="/page?a=1&b=2">{{ RouterLink 字符串传参 }}</RouterLink>
//取值
import { toRefs } from 'vue'
import { useRoute } from 'vue-router'
const { query}= toRefs(useRoute())
console.log(query.a)
console.log(query.b)

传参方案二:RouterLink 对象

  • query传参
//传值
<RouterLink :to="{ path:'/page', query: { a:1,b:2 } }">{{ RouterLink 字符串传参 }}</RouterLink>
<RouterLink :to="{ name:'page', query: { a:1,b:2 } }">{{ RouterLink 字符串传参 }}</RouterLink>
//取值
import { toRefs } from 'vue'
import { useRoute } from 'vue-router'
const { query}= toRefs(useRoute())
console.log(query.a)
console.log(query.b)
  • params
// 传 params 必须 用 name 配合
// 并且传值不能为非普通数据类型
<RouterLink :to="{ name:'page', params: { a:1,b:2 } }">{{ RouterLink 字符串传参 }}</RouterLink>
//路由需配置传参占位
{//path:'/page/:a/:b', path:'/page/:a/:b?', // b 为非必传name:'page',......
}
//取值-解构取值
import { toRefs } from 'vue'
import { useRoute } from 'vue-router'
const { params }= toRefs(useRoute())
console.log(params.a)
console.log(params.b)

传参方案三:RouterLink 对象 + Props

// 传 params 必须 用 name 配合
// 并且传值不能为非普通数据类型
<RouterLink :to="{ name:'page', params: { a:1,b:2 } }">{{ RouterLink 字符串传参 }}</RouterLink>
<RouterLink :to="{ name:'page', query: { a:1,b:2 } }">{{ RouterLink 字符串传参 }}</RouterLink>
//路由需配置传参占位
{//path:'/page/:a/:b', path:'/page/:a/:b?', // b 为非必传name:'page',// 将 params 作为props 方式传给组件//props: true,  // 配置项写法props(route){   // 函数式写法return {...route.query}},props:{   // 对象式写法a:1,b:2},......
}
//取值-解构取值
defineProps({ a,b })
console.log(a)
console.log(b)

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

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

相关文章

C#多维数组不同读取方式的性能差异

背景 近来在优化一个图像显示程序&#xff0c;图像数据存储于一个3维数组data[x,y,z]中&#xff0c;三维数组为一张张图片数据的叠加而来&#xff0c;其中x为图片的张数&#xff0c;y为图片行&#xff0c;Z为图片的列&#xff0c;也就是说这个三维数组存储的为一系列图片的数据…

深度解析 Spring 源码:探秘 CGLIB 代理的奥秘

文章目录 一、CGLIB 代理简介1.1 CGLIB 代理的基本原理和特点1.2 分析 CGLIB 如何通过字节码技术创建代理类 二、深入分析 CglibAopProxy 类的结构2.1 CglibAopProxy 类结构2.2 CglibAopProxy 类源码 三、CGLIB 代理对象的创建过程3.1 配置 Enhancer 生成代理对象3.2 探讨如何通…

PageHelper分页查询时,count()查询记录总数与实际返回的数据数量不一致

目录 场景简介代码判断异常情况排查原因解决 场景简介 1、使用PageHelper进行分页查询 2、最终构建PageInfo对象时&#xff0c;total与实际数据量不符 代码判断 异常情况 排查 通过对比count()查询的SQL与查询记录的SQL&#xff0c;发现是PageHelper分页查询时省去了order b…

Linux系统编程——基础IO与文件描述符(管理已打开的内存文件)

目录 一&#xff0c;文件预备 二&#xff0c;C语言文件操作函数 2.1 默认打开的三个流 2.2 写文件 2.3 读文件 2.4 再次理解当前路径 三&#xff0c;Linux操作文件系统调用 3.1 open()和close() 3.1.1 第一个参数 3.1.2 *第二个参数 3.1.3 第三个参数 3.2 write(…

(2024,基于熵的激活函数动态优化,具有边界条件的最差激活函数,修正正则化 ReLU)寻找更优激活函数

A Method on Searching Better Activation Functions 公众号&#xff1a;EDPJ&#xff08;进 Q 交流群&#xff1a;922230617 或加 VX&#xff1a;CV_EDPJ 进 V 交流群&#xff09; 目录 0. 摘要 3. 动机 4. 方法论 4.1 问题设定 4.1.1 贝叶斯错误率和信息熵 4.1.2 激活…

host修改

前言 想要修改 hosts 文件&#xff0c;您需要具有对系统文件的适当访问权限&#xff0c;并且知道如何编辑文本文件。hosts 文件是一个用于域名解析的本地文件&#xff0c;它允许您为特定的 IP 地址指定主机名。 以下是在不同操作系统中修改 hosts 文件的步骤&#xff1a; 一、…

香橙派 Kunpeng Pro 上手初体验

香橙派 Kunpeng Pro 上手初体验 目录 香橙派 Kunpeng Pro 上手初体验1.前言2.开箱3.开发板资源介绍硬件规格参数外观规格参数4.系统环境搭建系统镜像烧录ssh连接5.简单测试6.总结 1.前言 我很荣幸能收到了来自CSDN的测评邀请&#xff0c;让我有机会对香橙派最新推出的Kunpeng …

C# 使用Aspose生成和修改文档

Aspose库 C#中的Aspose库是一个强大的文件处理库&#xff0c;可以用于各种文件格式的创建、编辑、转换和操作。该库提供了丰富的功能&#xff0c;包括处理文档、电子表格、幻灯片、PDF、图像等多种文件格式&#xff0c;能够轻松实现文件的读取、写入、格式化、样式设置、数据操…

历时3周圆满结营,Sui Move HackerHouse精彩回顾

Sui 是基于第一原理重新设计和构建而成的 L1 公有链&#xff0c;旨在为创作者和开发者提供能够承载 Web3 中下一个十亿用户的开发平台。Sui 上的应用基于 Move 智能合约语言&#xff0c;并具有横向可扩展性&#xff0c;让开发者能够快速且低成本支持广泛的应用开发。 Move 是用…

Vectorworks 2024 Mac安装包下载Vectorworks 2024安装教程3D建模设计工具

安装 步骤 1&#xff0c;双击下载好的安装包&#xff0c;打开。 2&#xff0c;将G1DXHL.ldf拖到桌面上备用。 3&#xff0c;返回打开的镜像 选择install vectorworks2024 双击打开启动安装程序。电脑就90hi高腰腿疼痛和Y&Aaa9yY 4&#xff0c;输入电脑密码。 5&#xff0…

python onnx 推理yolov10

python onnx 推理yolov10 import onnxruntime as ort import cv2 import numpy as np# Class names for the COCO dataset CLASSES = ["person", "bicycle", "car", "motorcycle", "airplane"

DasViewer V3.3全新升级 | 新增点云数据浏览、点云关联全景照片、3DTiles在线数据浏览...

近日&#xff0c;DasViewer迎来3.3版本更新&#xff0c;新增点云数据浏览展示、点云关联全景照片、3DTiles在线数据浏览等功能&#xff0c;为用户带来多源数据可视化极速浏览全新体验。 一起来先睹为快↓ 新增功能 1&#xff0c;点云数据浏览 在新版本中&#xff0c;DasView…

CentOS Samba配置挂载

目录 安装samba 配置 /home 文件夹权限 配置 /home 文件夹共享 配置防火墙 添加 root 登录用户并创建密码 重启samba服务&#xff0c;关闭selinux 查看samba状态 以/home目录挂载为例&#xff1a; 安装samba sudo yum install samba 配置 /home 文件夹权限 sudo se…

rapidssl泛域名https600元一年

泛域名https证书也可以称之为通配符https证书&#xff0c;指的是可以用一张https证书为多个网站(主域名以及主域名下的所有子域名网站)传输数据加密&#xff0c;并且提供身份认证服务的数字证书产品。RapidSSL旗下的泛域名https证书性价比高&#xff0c;申请速度快&#xff0c;…

使用centos安装docker步骤

在 CentOS 8 上安装 Docker 可以按照以下步骤进行&#xff1a; 1. 卸载旧版本&#xff08;如果有&#xff09; 首先&#xff0c;确保系统中没有安装旧版本的 Docker&#xff1a; sudo dnf remove docker \docker-client \docker-client-latest \docker-common \docker-lates…

自己手写一个线性表List【C风格】

#include <iostream>//线性表、顺序表List#define MAX_SIZE 20 #define OK 1 #define ERROR 0 #define TRUE 1 #define FALSE 0typedef int Status;//返回状态类型 typedef int ElemType;//元素类型//结构体 typedef struct {ElemType data[MAX_SIZE];//数据类型&#x…

Python爬虫项目实战:百度任意图片抓取

大家好&#xff0c;我是南枫&#xff0c;这篇文章我将给大家介绍如何使用Python爬虫来达到想爬哪个明星图片就能爬下来的效果&#xff0c;那我们接下来看看如何实现的吧。 导入Python的requests库和re库。requests库用于发送HTTP请求&#xff0c;而re库用于处理正则表达式。 通…

20个例题掌握Python类相关知识点

1. 定义一个简单的类 class Dog:def __init__(self, name):self.name namedef bark(self):print(f"{self.name} says woof!")if __name__ "__main__":my_dog Dog("Rex")my_dog.bark()2. 类的基本属性 class Car:def __init__(self, brand, …

npm build报错Cannot find module ‘html-webpack-plugin‘解决方法

目录 一、问题描述二、问题原因三、解决方法 一、问题描述 npm build 报错&#xff1a; ERROR Error: Cannot find module html-webpack-pluginRequire stack:- D:\Workspaces\WebstormProjects\yy-cloud\ruoyi-ui\node_modules\script-ext-html-webpack-plugin\lib\plugin.j…

如何在已有Docker环境中安装包

1. 只在container中一次性安装&#xff0c;不影响image 首先启动容器&#xff0c;然后进入容器 docker-compose exec <service_name> bash其中&#xff0c;<service_name>可以通过以下命令查询&#xff08;前提是要先启动容器&#xff09; docker-compose ps进入…