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

---

vue-router路由参数（params和query）

⼀、params和query

params⽅法传参的时候，要在路由后⾯加参数名占位；并且传参的时候，参数名要跟路由后⾯设置的参数名对应。

/user/:id这个路由匹配/user/111, /user/222这⾥的 id就是 params

query⽅法，就没有这种限制，直接在跳转⾥⾯⽤就可以。

/user?id="111"
/user?id="222"

这⾥的 id就是 query

⼆、query和params的⽤法

1、params:

1.1 路由配置：

// 使⽤params传参，路由配置的时候 path 要带上参数
{
   path: '/user/:id',
   name: "users",
   component: User    //这个 User 是组件名称
 }

1.2 跳转方式：

// ⽅法1：
<router-link :to="{ name: 'users', params: { id: this.id}}">按钮</router-link>
// ⽅法2：
this.$router.push({name:'users',params:{id: this.id}})
// ⽅法3：
this.$router.push('/user/' + this.id)

1.3 页⾯url显⽰：

params在浏览器地址栏中不显⽰参数名

1.4 获取参数方式:

this.$route.params.id

2、query:

2.1 路由配置

//使⽤ query 传参这⾥不需要参⼊参数，参见上⾯的params写法
{
   path: '/user',    
   name: "users",
   component: User    //这个 users 是传进来的组件名称
 }

2.2 跳转⽅式：

// ⽅法1：
<router-link :to="{ name: 'users', query: { id: this.id }}">按钮</router-link>
// ⽅法2：
this.$router.push({ name: 'users', query:{ id: this.id }})
// ⽅法3：
<router-link :to="{ path: '/user', query: { id: this.id }}">按钮</router-link>
// ⽅法4：
this.$router.push({ path: '/user', query:{ id: this.id }})
// ⽅法5：
this.$router.push('/user?id=' +  this.id)

2.3 页⾯url显⽰：

query在浏览器地址栏中显⽰参数名称

2.4 获取参数⽅式:

this.$route.query.id