一、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