vue3中路由传参query、params及动态路由传参详解

2024-04-02 19:04:59 948人浏览安东尼

摘要

目录一、query传参二、params传参三、动态传参四、query传参和params传参的区别总结一、query传参编程式导航使用router.push 或者 router.r

一、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传参，根据动态传递参数在传递页面获取数据，以防页面刷新数据消失

总结

到此这篇关于vue3中路由传参query、params及动态路由传参的文章就介绍到这了,更多相关vue3路由传参query params内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: vue3中路由传参query、params及动态路由传参详解

本文链接: https://www.lsjlt.com/news/168171.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

vue3中路由传参query、params及动态路由传参详解

目录一、query传参二、params传参三、动态传参四、query传参和params传参的区别总结一、query传参编程式导航使用router.push 或者 router.r...

99+

2022-11-13
详解Vue路由传参的两种方式query和params

Vue路由传参的两种方式query和params 一、router-link 1. 不带参数 <router-link :to="{name:'home'}"> <...

99+

2022-11-13
vue3路由配置以及路由跳转传参详解

目录1、安装路由2、编写需要展示的路由3、配置路由3、使用路由4、編程式路由5、路由传参5、1query参数传递5、2传递params参数 6、子路由配置总结1、安装路由 ...

99+

2023-05-16

vue3 路由跳转 vue3路由配置 vue跳转传参数
vuejs路由的传参及路由props配置详解

目录前言方式1-使用query方式命名路由方式2-路由的params参数query与params的区别路由的props配置路由配置的布尔模式路由配置的对象模式路由配置函数模式总结前言...

99+

2022-11-13
vue中路由传参以及跨组件传参详解

路由跳转 this.$router.push('/course'); this.$router.push({name: course}); this.$router.go(-1...

99+

2022-11-11
vue动态路由配置及路由传参的示例分析

这篇文章主要介绍了vue动态路由配置及路由传参的示例分析，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。动态路由：　　当我们很多个页面或者组件...

99+

2022-10-19
React中路由的参数传递路由的配置文件详解

目录路由的参数传递配置动态路由路由的配置文件路由的参数传递传递参数有二种方式(需要注意的是, 这两种方式在Router6.x中都是提供的hook函数的API, 类组件需要通过高阶组...

99+

2022-11-13

React路由参数传递 React路由配置文件 React路由 React路由参数
vue嵌套路由中params传递参数的示例分析

这篇文章主要介绍vue嵌套路由中params传递参数的示例分析，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！在嵌套路由中，父路由向子路由传值除了query外，还有params，par...

99+

2022-10-19
Flutter路由传递参数及解析实现

上一篇Flutter页面路由及404路由拦截实现介绍了使用路由来实现页面的跳转，从而简化页面之间的耦合，并可以实现路由拦截。在实际开发中，我们经常会需要在页面跳转的时候携带路由参数...

99+

2022-11-12
react中路由跳转及传参的实现

目录1.useNavigate2.useLocation3.示例1.useNavigate useNavigate 是 React Router v6 中新增的一个 hoo...

99+

2023-05-19

react 路由跳转 react 路由传参
React路由参数传递与嵌套路由的实现详细讲解

目录1. 页面路由参数传递1.1 动态路由参数1.2 search字符串1.3 页面参数隐式传递2. 嵌套路由1. 页面路由参数传递 1.1 动态路由参数描述：以“/...

99+

2022-11-13
Vue路由传参及props解耦深入分析

目录一、路由传参query传参query配合声明式导航query配合编程式导航query传参的特点params传参路径使用参数占位时路径不使用占位时二、props解耦1.props布...

99+

2022-11-13
vue路由传参之使用query传参页面刷新数据丢失问题解析

目录vue路由传参（使用query传参页面刷新数据丢失问题）1. 路由传参的两种方式1. params传参（刷新页面数据会丢失）2. query传参（刷新数据不会丢失）2. 使用qu...

99+

2023-05-15

vue路由传参 query传参页面刷新数据丢失 vue路由传参params和query
vue路由传参方式的方式总结及获取参数详解

目录一、声明式传参1.params传参(显示参数)2.params传参(不显示参数)3.query 传参二、编程式传参1.params传参(显示参数)2.params传参(不显示参数...

99+

2022-11-13
vue3中怎么使用router路由实现跳转传参

本文小编为大家详细介绍“vue3中怎么使用router路由实现跳转传参”，内容详细，步骤清晰，细节处理妥当，希望这篇“vue3中怎么使用router路由实现跳转传参”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。一...

99+

2023-07-06
vue3中如何使用router路由实现跳转传参

这篇文章主要介绍了vue3中如何使用router路由实现跳转传参的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇vue3中如何使用router路由实现跳转传参文章都会有所收获，下面我们一起来看看吧。一、路由跳转首...

99+

2023-07-05
详解Vue 路由组件传参的 8 种方式

我们在开发单页面应用时，有时需要进入某个路由后基于参数从服务器获取数据，那么我们首先要获取路由传递过来的参数，从而完成服务器请求，所以，我们需要了解路由传参的几种方式，以下方式同 v...

99+

2022-11-11
Vue路由传参的三种方式实例详解

目录Vue路由传参三种方式一、params传参二、路由属性配置传参：三、query传参区别特别注意总结Vue路由传参三种方式 params传参路由属性配置传参query传参一、pa...

99+

2023-01-28

vue路由的传参方式 vue路由传参的两种方式 vue参数传递方式
Vue中$router.push()路由切换及如何传参和获取参数

目录1、路由的两种常见方式2、传参和获取参数（query和params）总结 1、路由的两种常见方式 1）声明式： <router-link to="/login"...

99+

2023-05-13

vue $router.push()路由切换 vue路由切换页面 vue 路由切换
vue路由传参接收以及传参对象为对象时的问题及解决

目录路由传参接收以及传参对象为对象时的问题场景接收路由参数vue路由传参总结Vue路由传参路由传参接收以及传参对象为对象时的问题具体代码如下所示：场景 <div @clic...

99+

2022-11-13