摘要：本文主要介绍了vue路由参数传递的基本实现方法，并结合实例总结分析了vue.js路由参数传递的三种实现方法，包括参数显示参数传递、非显示参数传递和查询显示参数传递。有需要的可以参考一下。

本文结合实例描述了vue路由参数的基本实现。分享给你，供你参考，如下：

前言

通常，当父路由跳转到子路由时，应用VU路由传输参数的使用场景，携带参数跳转。传递参数可以分为params传递参数和查询传递参数，params传递参数又可以分为在url中显示参数和不显示参数两种方式，这是vue路由传递参数的三种方式。

方式一：params 传参（显示参数）

Params参数(显示参数)可以分为声明式和编程式两种方式。

1.声明性路由器链接

此方法由路由器链接组件的to属性实现。此方法的参数可以是字符串路径或描述地址的对象。当使用这种方法传递值时，需要预先配置子路由的参数，例如：

//子路由配置

{

路径：“/child/:id”，

组件：子组件

}

//父路由组件

路由器链接：to=/Child/123 输入子路由/路由器链接。

2.可编程的。$router.push

当使用这种方法传递值时，还需要预先配置子路由的参数，例如：

//子路由配置

{

路径：“/child/:id”，

组件：子组件

}

//父路由的编程参数(通常由事件触发)

这个。$router.push({

路径：“/child/${id}”，

})

在子路径中，传递的参数值可以通过下面的代码获得

这个。$route.params.id

方式二：params 传参（不显示参数）

Params参数传递(不显示参数)也可以分为两种方式：声明式和编程式。与第一种方式不同，该值通过路由的别名来传递。

1.声明性路由器链接

这个方法也是通过路由器链接组件的to属性实现的，例如：

Router-link: to= {name: Child ，params: {id: 123}} 输入子路由/路由器链接。

2.可编程的。$router.push

当使用此方法传输值时，子路由也需要预先配置参数，但是：/id不能再用于传输参数，因为params已经用于在父路由中携带参数，例如：

//子路由配置

{

路径：/child，

姓名：孩子，

组件：子组件

}

//父路由的编程参数(通常由事件触发)

这个。$router.push({

姓名：孩子，

参数：{

编号：123

}

})

在子路径中，传递的参数值可以通过下面的代码获得

这个。$route.params.id

注意：上面提到的使用params传递参数而不显示url的方法会导致页面刷新时传递的值丢失。

方法3:查询传递参数(显示参数)

查询参数(显示参数)也可以分为声明式和编程式两种方式。

1.声明性路由器链接

这种方法也是通过router-link组件的to属性实现的，但是使用这种方法传递值时，需要子路由提前配置路由别名(name属性)，例如：

//子路由配置

{

路径：/child，

姓名：孩子，

组件：子组件

}

//父路由组件

Router-link: to= {name: Child ，query: {id: 123}} 输入子路由/路由器链接。

2.可编程的。$router.push

以这种方式传递值时，子路由还需要预先配置路由别名(名称属性)，例如：

//子路由配置

{

路径：/child，

姓名：孩子，

组件：子组件

}

//父路由的编程参数(通常由事件触发)

这个。$router.push({

姓名：孩子，

参数：{

编号：123

}

})

在子路径中，传递的参数值可以通过下面的代码获得

这个。$route.query.id

希望本文对vue.js的编程有所帮助