Vue:Vue Router参数传递

Lasted 2020-01-02 21:25:16

Vue Router切换路由支持两种传参模式:queryparams,前者类似GET方法,后者类似POST方法。

1. Query参数传递和接收。

传递参数:

this.$router.push({
  name: "detail",
  query: {
    "id": "123456"
  }
});

接收参数:

//接收Query参数
this.$route.query

#{id: "123456"}

注:切换路由的时候用的是this.$router对象,接收参数时使用的是this.$route对象,后者少了一个r

2. Params参数传递和接收。

 传递参数:

this.$router.push({
  name: "detail",
  params: {
    "id": "123456"
  }
});

//URL:uri?id=12345

接收参数:

this.$route.params

#{id: "123456"}

注:如果参数中提供了pathparams参数会被忽略。