Vue3路由传参和使用参数的多种方式

第一种方式：用query传参

对于router-link

普通携带参数方式

对于特殊触发时机，比如点击事件

普通携带参数方式

②对象传参方式

特殊传参方式：路由的props配置

对于query，在需要被传参的路由处填写props函数式写法

进一步简化（多级es6对象解构）

如何获取参数?

第二种传参方式：params传参

params方式必须在路由上有占位,值得注意的是用对象传参必须由name指定路由

对于router-link

普通携带参数方式

对象携参方式

对于特殊触发时机，比如点击事件

普通携带参数方式

对象携参方式

特殊传参方式：路由的props配置

对于params

① 在需要被传参的路由处填写props:true，在其内可以接收对应参数名的数据

需要被传参的路由组件中

② 在需要被传参的路由处填写props函数式写法

路由中

组件中