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

更新时间：2022年09月22日 10:46:04 作者：凡小多

vue3中的传参方式和vue2中一样,都可以用query和params传参,下面这篇文章主要给大家介绍了关于vue3中路由传参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传参，根据动态传递参数在传递页面获取数据，以防页面刷新数据消失

总结

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

您可能感兴趣的文章:

vue路由传参及获取参数的方式总结
这篇文章主要介绍了vue路由传参及获取参数的方式总结，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-05-05
vite多页面配置项目实战
vite官方文档中有关于多页面应用模式如果配置的说明,下面这篇文章主要给大家介绍了关于vite多页面配置的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
2022-04-04
vue3使用百度地图超详细图文教程
这篇文章主要给大家介绍了关于vue3使用百度地图的相关资料,最近一个项目要用到地图，因为微信小程序用的也是百度地图，所以想着网页端也用百度地图,需要的朋友可以参考下
2023-07-07
vue实现div拖拽互换位置
这篇文章主要为大家详细介绍了vue实现div拖拽互换位置的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-12-12
Vue实现渐变色进度条的代码
这篇文章主要介绍了Vue实现渐变色进度条的代码，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
Vue3.0静态文件存放路径与引用方式
这篇文章主要介绍了Vue3.0静态文件存放路径与引用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
解决Vite无法分析出动态import的类型,控制台出警告的问题
这篇文章主要介绍了解决Vite无法分析出动态import的类型,控制台出警告的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
浅谈angular4.0中路由传递参数、获取参数最nice的写法
下面小编就为大家分享一篇浅谈angular4.0中路由传递参数、获取参数最nice的写法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-03-03
Vue解决echart在element的tab切换时显示不正确问题
这篇文章主要介绍了Vue解决echart在element的tab切换时显示不正确问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-08-08
vue3.0 setup中使用vue-router问题
这篇文章主要介绍了vue3.0 setup中使用vue-router问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10