Question

路由传参

Query路由传参

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

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

接收参数

使用 useRoute 的 query

<template>
  <div>品牌：{{ route.query?.name }}</div>
  <div>价格：{{ route.query?.price }}</div>
  <div>ID：{{ route.query?.id }}</div>
</template>
<script lang="ts" setup>
  import { useRoute } from 'vue-router';
  const route = useRoute()
</script>

Params路由传参

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

type Item = {
  id: number
}
const toDetail = (item: Item) => {
    router.push({
        name: 'Reg',
        params: item
    })
}

接收参数

使用 useRoute 的 params

<template>
  <div>品牌：{{ route.params?.name }}</div>
  <div>价格：{{ route.params?.price }}</div>
  <div>ID：{{ route.params?.id }}</div>
</template>
<script lang="ts" setup>
import { useRoute } from 'vue-router';
const route = useRoute()
</script>

动态路由传参

很多时候，我们需要将给定匹配模式的路由映射到同一个组件。例如，我们可能有一个 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')
    }
]

type Item = {
  id: number
}
const toDetail = (item: Item) => {
    router.push({
        name: 'Reg',
        params: {
            id: item.id
        }
    })
}

Query和Params二者的区别

1. query 传参配置的是 path，而 params 传参配置的是name，在 params中配置 path 无效

2. query 在路由配置不需要设置参数，而 params 必须设置

3. query 传递的参数会显示在地址栏中

4. params传参刷新会无效，但是 query 会保存传递过来的值，刷新不变 ;

5. 路由配置