企业官网建设流程全解析

目录

一、普通静态路径 /orderDetail

二、动态路由 /orderDetail/:id

三、表格版总结对比

1、普通静态路径 /orderDetail

2、动态路由 /orderDetail/:id

2、query传参----传递对象

一、普通静态路径/orderDetail

1、使用 name + params

router.push({ name: 'OrderDetail', params: { id: 123 } }) const id = route.params.id // 123

2、使用 name + query

router.push({ name: 'OrderDetail', query: { id: 123 }) const id = route.query.id // '123'（字符串）

注意：如果query传递是是一个对象

query: { editData: row }

强制刷新后打印参数

这就是对象被强制转化为字符串的结果。

原因是vue路由传值会把参数都转换程字符串进行拼接，相当于string

解决方案：传递参数时将参数转化为JSON字符串

editData: JSON.stringify(row)

接收时再转换为对象： console.log(JSON.parse(val));

此时，直接刷新浏览器，url参数不丢失，但是路径会把对象数据全部展示，暴露了参数

3、使用 path + query

router.push({ path: '/orderDetail', query: { id: 123, type: 'online' } }) const id = route.query.id // '123' const type = route.query.type // 'online'

二、动态路由/orderDetail/:id

1、使用 name + params (标准用法)

// 路由配置 { name: 'OrderDetail', path: '/orderDetail/:id', component: OrderDetail } router.push({ name: 'OrderDetail', params: { id: 123, type: 'online' } }) const id = route.params.id // 123 const type = route.params.type // 'online'

2、使用 name + params + query (混合)

router.push({ name: 'OrderDetail', params: { id: 123 }, query: { type: 'online', from: 'list' } }) const id = route.params.id // 123 const type = route.query.type // 'online' const from = route.query.from // 'list'

3、使用 path + query

router.push({ path: '/orderDetail/123', query: { type: 'online' } }) const id = route.params.id // 123（从URL路径中解析） const type = route.query.type // 'online'

三、表格版总结对比

1、普通静态路径/orderDetail

2、动态路由/orderDetail/:id