路由传参

将 props 传递给路由组件 | Vue Router (vuejs.org) (opens new window)

# Query路由传参

# 编程式导航

使用router的push或者replace的时候，改为对象形式新增query 必须传入一个对象

<script>
const toDetail = (item: Item) => {
    router.push({
        path: '/reg',
        query: item
    })
}
</script>

1
2
3
4
5
6
7
8

<template>
    品牌：{{ route.query?.name }}
    价格：{{ route.query?.price }}
    ID：{{ route.query?.id }}
</template>

<script>
	// 接受参数
	//使用 useRoute 的 query
	import { useRoute } from 'vue-router';
	const route = useRoute()
</script>

1
2
3
4
5
6
7
8
9
10
11
12

# Params路由传参

# 编程式导航

使用router的push或者replace的时候，改为对象形式并且只能使用name，path无效，然后传入params

<script>
const toDetail = (item: Item) => {
    router.push({
        name: 'Reg',
        params: item
    })
}
</script>

1
2
3
4
5
6
7
8

<script>
    // 接受参数
    // 使用 useRoute 的 params
    import { useRoute } from 'vue-router';
    const route = useRoute()
</script>
<template>
    <div>品牌：{{ route.params?.name }}</div>
    <div>价格：{{ route.params?.price }}</div>
    <div>ID：{{ route.params?.id }}</div>
</template>

1
2
3
4
5
6
7
8
9
10
11

# 动态路由传参

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

路径参数用冒号 : 表示。当一个路由被匹配时，它的 params 的值将在每个组件

const routes:Array<RouteRecordRaw> = [
    {
        path:"/",
        name:"Login",
        component:()=> import('../components/login.vue')
    },
    {
        //动态路由参数
        path:"/reg/:id",
        name:"Reg",
        component:()=> import('../components/reg.vue')
    }
]
const toDetail = (item: Item) => {
    router.push({
        name: 'Reg',
        params: {
            id: item.id
        }
    })
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<script>
    import { useRoute } from 'vue-router';
    import { data } from './list.json'
    const route = useRoute()

    const item = data.find(v => v.id === Number(route.params.id))
</script>

1
2
3
4
5
6
7

# 二者的区别

query 传参配置的是 path，而 params传参配置的是name，在 params中配置path无效
query在路由配置不需要设置参数，而 params必须设置
query 传递的参数会显示在地址栏中
params传参刷新会无效，但是 query 会保存传递过来的值，刷新不变 ;
路由配置

上次更新: 2024/08/14, 04:14:33

← 历史记录嵌套路由→