Summary of the way vue route jump parameters to pass

In daily business, it is common to pass parameters while routing jumping, and there are three ways to transfer parameters:

1) Through dynamic routing

//Configure dynamic routing in the routing configuration file{
   path: '/detail/:id',
   name: 'Detail',
   component: Detail
  }
//Page when jumpingvar id = 1;
this.$('/detail/' + id)
 
//After jumping the page to get parametersthis.$

2) Pass the value through the query attribute

//In the routing configuration file{
   path: '/detail',
   name: 'Detail',
   component: Detail
  }
//Page when jumpingthis.$({
 path: '/detail',
 query: {
  name: 'Zhang San'，
  id: 1,
 }
})
 
//After jumping, the page gets parameter objectthis.$ 

3) Pass the value through the params attribute

//In the routing configuration file{
   path: '/detail',
   name: 'Detail',
   component: Detail
  }
//Page when jumpingthis.$({
 name: 'Detail',
 params: {
  name: 'Zhang San'，
  id: 1,
 }
})
 
//After jumping, the page gets parameter objectthis.$ 

Summarize:

1. Dynamic routing and query attribute value transfer. Page refresh parameters will not be lost, params will be lost.

2. Dynamic routing is usually used to pass a parameter (such as the id of the details page). Query and params can pass one or multiple parameters.

Supplementary method:

Page refresh data will not be lost

methods：{
 insurance(id) {
    //Directly call $ to implement the jump carrying parameters    this.$({
     path: `/particulars/${id}`,
    })
}

The corresponding routing configuration is as follows:

this.$

This article summarizes the methods of passing parameters in vue route jump. For more information about the three methods of passing parameters in vue route jump jump, please search for my previous article or continue browsing the related articles below. I hope everyone will support me in the future!