vue3的路由传参query、params以及动态路由传参

一、query传参

编程式导航 使用

router.push

或者

router.replace

的时候，改为对象形式新增

query

必须传入一个对象

import{ useRouter }from'vue-router';...const router =useRouter()consttoDetail=(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><scriptsetuplang='ts'>import{ useRoute }from'vue-router';...const route =useRoute()</script><stylelang='less'scoped></style>

二、params传参

编程式导航 使用

router.push

或者

router.replace

的时候，改为对象形式并且只能使用

name

，path无效，然后传入

params

import{ useRouter }from'vue-router';...const router =useRouter()consttoDetail=(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><scriptsetuplang='ts'>import{ useRoute }from'vue-router';...const route =useRoute()</script><stylelang='less'scoped></style>

三、动态传参

很多时候，我们需要将给定匹配模式的路由映射到同一个组件。
例如，我们可能有一个 User 组件，它应该对所有用户进行渲染，但用户 ID 不同。在 Vue Router 中，我们可以在路径中使用一个动态字段来实现，我们称之为 路径参数

// router.tsimport{ 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
})exportdefault router

import{ useRouter }from'vue-router';...const router =useRouter()consttoDetail=(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><scriptsetuplang='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><stylelang='less'scoped></style>

四、query传参和params传参的区别

• query 传参配置的是 path，而 params 传参配置的是name，且在 params中配置 path 无效
• query传递的参数会显示在地址栏中，而params传参不会
• query传参刷新页面数据不会消失，而params传参刷新页面数据回消失
• params可以使用动态传参，动态传参的数据会显示在地址栏中，且刷新页面不会消失，因此可以使用动态params传参，根据动态传递参数在传递页面获取数据，以防页面刷新数据消失