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
    })
}

接受参数

使用 useRoutequery

<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
    })
}

接受参数

使用 useRouteparams

<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}
    })
}

接受参数

使用 useRouteparams

<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

%s 个评论

要回复文章请先登录注册