vue-router4 (五) 路由传参的2种方法

本文主要是介绍vue-router4 (五) 路由传参的2种方法，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

以A组件向B组件传参为例：

方法1：

A组件中传数据（用path + query）：

const toDetail= (item:TtemType)=>{router.push({path:"/reg",   //对应路由中的path路径query: item    //将传递的数据放在query中，query接收一个对象});
}

B组件接收数据：

必须先引入

import { useRoute } from 'vue-router';

const route = useRoute();

 <p>品牌:{{ route.query.name }}</p>

方法2  路由动态传参：

A组件中传数据（用name + params）：

const toDetail= (item:TtemType)=>{router.push({name:"Reg",  //对应路由中的name属性值params:{id:item.id   //传递的参数}});
}

params的id = 动态路由中的id：

const routes:Array<RouteRecordRaw> = [{path:"/reg/:id",name:"Reg",component:()=>import("../components/reg.vue")}
]

B组件接收数据

必须先引入

import { useRoute } from 'vue-router';

const route = useRoute();

 <p>商品ID:{{route.params.id}}</p>

这篇关于vue-router4 (五) 路由传参的2种方法的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---