vue3中路由传参query、params及动态路由传参详解
作者:凡小多 发布时间:2023-07-02 16:58:29
标签:路由传参,query,params
一、query传参
编程式导航 使用router.push
或者 router.replace
的时候,改为对象形式新增query
必须传入一个对象
import { useRouter } from 'vue-router';
...
const router = useRouter()
const toDetail = (item: Item) => {
router.push({
path: '/info',
query: item
})
}
接受参数
使用 useRoute
的 query
<template>
<div>
<div>ID:{{route.query?.id}}</div>
<div>名称:{{route.query?.name}}</div>
<div>价格:{{route.query?.price}}</div>
</div>
</template>
<script setup lang='ts'>
import { useRoute } from 'vue-router';
...
const route = useRoute()
</script>
<style lang='less' scoped>
</style>
二、params传参
编程式导航 使用router.push
或者 router.replace
的时候,改为对象形式并且只能使用name
,path无效,然后传入params
import { useRouter } from 'vue-router';
...
const router = useRouter()
const toDetail = (item: Item) => {
router.push({
name: 'Info',
params: item
})
}
接受参数
使用 useRoute
的 params
<template>
<div>
<div>ID:{{route.params?.id}}</div>
<div>名称:{{route.params?.name}}</div>
<div>价格:{{route.params?.price}}</div>
</div>
</template>
<script setup lang='ts'>
import { useRoute } from 'vue-router';
...
const route = useRoute()
</script>
<style lang='less' scoped>
</style>
三、动态传参
很多时候,我们需要将给定匹配模式的路由映射到同一个组件。
例如,我们可能有一个 User 组件,它应该对所有用户进行渲染,但用户 ID 不同。在 Vue Router 中,我们可以在路径中使用一个动态字段来实现,我们称之为 路径参数
// router.ts
import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
const routes: Array<RouteRecordRaw> = [{
path: '/',
name: 'table',
component: () => import('@/view/Table/index.vue')
}, {
path: '/info/:id',
name: 'Info',
component: () => import('@/view/Table/info.vue')
},
...
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router
import { useRouter } from 'vue-router';
...
const router = useRouter()
const toDetail = (item: Item) => {
router.push({
name: 'Info',
params: {id: item.id}
})
}
接受参数
使用 useRoute
的 params
<template>
<div>
<div>ID:{{ item?.id }}</div>
<div>名称:{{ item?.name }}</div>
<div>价格:{{ item?.price }}</div>
</div>
</template>
<script setup lang='ts'>
import { useRoute } from 'vue-router';
import { data } from './data.json'
...
const route = useRoute()
// 模拟根据id获取数据
const item = data.find(v => v.id === Number(route.params.id))
</script>
<style lang='less' scoped>
</style>
四、query传参和params传参的区别
query 传参配置的是 path,而 params 传参配置的是name,且在 params中配置 path 无效
query传递的参数会显示在地址栏中,而params传参不会
query传参刷新页面数据不会消失,而params传参刷新页面数据回消失
params可以使用动态传参,动态传参的数据会显示在地址栏中,且刷新页面不会消失,因此可以使用动态params传参,根据动态传递参数在传递页面获取数据,以防页面刷新数据消失
来源:https://blog.csdn.net/wgh4318/article/details/125824369
0
投稿
猜你喜欢
- 本文实例讲述了Python3.6简单反射操作。分享给大家供大家参考,具体如下:# -*- coding:utf-8 -*-#!python3
- 在使用Python做脚本的话,有两个库可以使用,一个为PyUserInput库,另一个为pyautogui库。就本人而言,我更喜欢使用pya
- 在使用SQL Server 的过程,中由于经常需要从多个不同地点将数据集中起来或向多个地点复制数据,所以数据的导出,导入是极为常见的操作.我
- 本文实例为大家分享了python实现txt文件格式转换为arff格式的具体代码,供大家参考,具体内容如下将文件读取出来的时候默认都是字符型的
- TCP 客户端一个使用TCP协议实现可连续对话的客户端示例代码:import socket# 客户端配置HOST = 'localh
- 原本运行正常的ASP页面,今天突然提示: 代码如下: Microsoft VBScript 运行时错误 错误 '800a01a8&
- 使用APPLY运算符可以为实现查询操作的外部表表达式返回的每个行调用表值函数。 表值函数作为右输入,外部表表达式作为左输入。 通过对右输入求
- 前言计算机系统中有很多独占性的资源,在同一时刻只能每个资源只能由一个进程使用,我们之前经常提到过打印机,这就是一个独占性的资源,同一时刻不能
- 对于map()它的原型是:map(function,sequence),就是对序列sequence中每个元素都执行函数function操作。
- 简介字符串序列用于表示和存储文本,python中字符串是不可变的,一旦声明,不能改变通常由单引号(' ),双引号(" ),
- Javascript中的eval函数让我们可以很方便地操作一系列变量(a1,a2,a3,……)。自从VBScript 5.0之后,我们也可以
- 前言故事要从上面这张表情包开始讲起,看到这张表情包之后,我突发奇想,觉得可以将室友上班摸鱼的照片拼接起来,做成表情包叫他起床 激励他学习!!
- 看了山人表单验证,又看了其他一些验证程序和相关的一些参考资料,写出了一个比较简洁的js表单验证程序。特点是扩展容易,可以方便的添加自己需要的
- 网站设计似乎朝着越来越复杂的方向发展。这部分源于显示器的逐步增大,随着宽屏显示器的增多,更有加剧网站页面复杂程度的趋势。但是我接触网站设计近
- 一、前言我们今天要安装的selenium 就是浏览器自动化测试框架,是一个用于Web应用程序的测试工具,就是模拟用户操作。支持的浏览器包括C
- 如果你想把Python嵌入C/C++中是比较简单的事情,你需要的是在VC中添加Python的include文件目录和lib文件目录。下面我们
- 本文实例讲述了thinkPHP中配置的读取与C方法。分享给大家供大家参考,具体如下:1.项目公共配置Conf/config.php内容如下&
- 以下代码比较简单,对python实现ftp上传文件相关知识感兴趣的朋友可以参考下#encoding=utf8from ftplib impo
- 我们能否使用一些自动化工具代替人来完成数据分析的过程呢,现有一些成熟的 AutoEDA 工具可以一定程度上完成上述过程。本文中,我将盘点常见
- 为了显示一个渐变而专门制作一个图片的做法是不灵活的,而且很快会成为一种不好的做法。但是遗憾的是,截至写这篇文章,可能还必须这样做,但是希望不