Vue progression (unitary three) : Basic methods of Vue route parameter transmission

1, dynamic routing (page refresh data is not lost)

Methods: {insurance(id) {
       // Call $router.push directly to jump with parameters
        this.$router.push({
          path: `/particulars/${id}`})},Copy the code

The routing configuration

{
     path: '/particulars/:id'.name: 'particulars'.component: particulars
   }
Copy the code

The receive page is received with this.$route.params.id

2. The route name matches and the parameter is passed through params

Methods: {insurance(id) {
       this.$router.push({
          name: 'particulars'.params: {
            id: id
          }
        })
  }
Copy the code

 {
     path: '/particulars'.name: 'particulars'.component: particulars
   }
Copy the code

3, Route path path match,

Pass parameters through query, in which case the parameters passed by Query are displayed after the URL? Id =?

Methods: {insurance(id) {
        this.$router.push({
          path: '/particulars'.query: {
            id: id
          }
        })
  }
Copy the code

The routing configuration

{
     path: '/particulars'.name: 'particulars'.component: particulars
   }
Copy the code

This.$route.query.id receives the parameter

Query (params); query (params);

1. On the usage

Query = path; params = name; this.$route.query.name; this.$route.params.name;

$router = $route; $router = $route;

2. On the show

Query is more like get in Ajax, and Params is more like POST. The former displays the parameters in the browser address bar, while the latter does not.

Develop reading