Query路由传参

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

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

接受参数

使用 useRoute 的 query

import { useRoute } from 'vue-router';
const route = useRoute()

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

Params路由传参

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

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

接受参数

使用 useRoute 的 params

import { useRoute } from 'vue-router';
const route = useRoute()

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

动态路由传参

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

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


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

二者的区别

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

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

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

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

5. 路由配置