vue-route传参

vue 中 this.$router.push() 路由跳转传参 及 参数接收的方法

编程式的导航 router.push 传递参数有两种类型：字符串、对象

字符串

字符串的方式是直接将路由地址以字符串的方式来跳转，这种方式很简单但是不能传递参数：

this.$router.push("home");

对象

想要传递参数主要就是以对象的方式来写，分为两种方式：命名路由、查询参数，下面分别说明两种方式的用法和注意事项。

命名路由的前提就是在注册路由的地方需要给路由命名如:

{
  path: '/',
  name: 'orderDetail',  //路由名称
  component: detail,
  meta: { title: '订单详情' },
}

传递参数方法有两种：

params

由于动态路由也是传递params的，所以在 this.$router.push() 方法中 path不能和params一起使用，否则params将无效。需要用name来指定页面。

通过name获取页面，传递params：

this.$router.push({name:'orderDetail', params:{orderInfo: orderInfo}})

在目标页面通过this.$route.params获取参数：

this.$route.param.orderInfo

query

页面通过path和query传递参数，该实例中orderInfo为某行订单数据
传参跳转

this.$router.push({path:'./AmbOrderDetail', query:{orderInfo: orderInfo}})

接收参数

this.$route.query.orderInfo