Vue-router 四.路由传参

Query 路由传参

传递参数

编程式导航 使用 router push 或者 replace 的时候 改为对象形式新增 query 必须传入一个对象，会将 query 对象展示在 路由路径(url) 上

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

在地址中显示的传递的参数数据：

接受参数

使用 useRoute 的 query

import { useRoute } from 'vue-router';//注意这里用的是useRoute
const route = useRoute()

将参数进行取：

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

Params 路由传参

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

const toDetail = (item: Item) => {
    router.push({
        name: 'Reg',//必须使用Name,params不能使用path去传
        params: item
    })
}

地址栏并没有任何信息

接受参数

使用 useRoute 的 params
注意：这里会有一个问题，用params接受传参时，刷新后参数会丢失，但是请看下面注解（最终看动态路由传参）

[!NOTE] Important Note
在 8 月份之后的 vue 中，若不把 params 参数写在路由路径中将不会在组件中得到 params 参数，所以说现在 params 参数也会显示在地址栏上了。不是弃用 params。
https://github.com/vuejs/router/blob/main/packages/router/CHANGELOG.md#414-2022-08-22

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

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

~
~
~
为了解决刷新丢失数据问题：
1.params 参数写在路由路径中，路径地址例如下图：path:“/reg/:id”(id为自己所定义的值)


~
这样地址栏上参数也会显示出来，并且刷新并不会丢失数据
这样就解决了上面注解所提到的

动态路由传参

很多时候，我们需要将给定匹配模式的路由映射到同一个组件。
例如，我们可能有一个 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.首先，从模块 “./list.json” 中导入变量 data。
2.然后，利用数组函数 find() 在 data 中找到符合条件的数据项。find() 函数接受一个判断函数作为参数，以确定是否匹配当前元素，并返回第一个满足条件的元素。在本例中，判断函数是 (v) => v.id === router.params.id，即如果当前元素的 id 属性等于路由参数中的 id 值，则说明该元素与请求相匹配。
3.最后，将匹配成功的元素作为结果返回。

二者的区别

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

以上结合github author -> Huxzhi 作者的笔记以及小满ZS满哥教学综合进行编写