web前端：vue路由传参的三种方式

作者:Thinkguo更新于： 2020-02-28 11:22:32

　　路由（routing）就是通过互联的网络把信息从源地址传输到目的地址的活动。路由发生在OSI网络参考模型中的第三层即网络层。路由引导封包转送，经过一些中间的节点后，到它们最后的目的地。

　　方式一

　　通过query方式传参

　　这种情况下query传递的参数会显示在url后面

　　this.$router.push({

　　path:'/detail',

　　query:{

　　id:id

　　}

　　})

　　对应路由配置：

　　{

　　path:'/detail',

　　name:'Detail',

　　component:Detail

　　}

　　子组件获取参数

　　this.$route.query.id

　　方式二

　　通过params方式传参

　　this.$router.push({

　　name:'Detail',

　　params:{

　　id:id

　　}

　　})

　　路由配置

　　{

　　path:'/detail',

　　name:'Detail',

　　component:Detail

　　}

　　获取参数

　　this.$route.params.id

　　方式三

　　直接在路由地址后面拼接参数

　　this.$router.push({

　　path:`/detail/${id}`,

　　})

　　路由配置

　　{

　　path:'/detail/:id',

　　name:'Detail',

　　component:Detail

　　}

　　获取参数

　　this.$route.params.id

　　路由与桥接的不同，在于路由假设位址相似的节点距离相近。这使得路由表中的一项纪录可以表示到一群位址的路径。