1. The vUE route forwards parameters

In daily services, it is common to transfer parameters along with route hops. There are three methods for transferring parameters:

1.1 Configuring Dynamic Routes

  • The page is refreshed and the parameter does not disappear
  • The URl path shows the parameters passed, and the parameters are exposed
//1. Configure dynamic routes in the routing configuration file
{
     path: '/detail/:id'.name: 'Detail'.component: Detail
 }
   
   
//2
var id = 1;
this.$router.push('/detail/' + id)
//url形式： http://192.169.3.198/detail/1
 
//3. Obtain parameters on the displayed page
this.$route.params.id
Copy the code

1.2 Transferring values through the Query attribute

  • Use path to match routes
  • The page is refreshed and the parameter does not disappear
  • Query is similar to get. After a jump, the page URL will be concatenated with parameters. id=1
//1. Route configuration file
{
     path: '/detail'.name: 'Detail'.component: Detail
   }
   
//2
this.$router.push({
  path: '/detail'.query: {
    name: 'Joe'.id: 1,}})/ / url: http://192.169.3.198/detail? Id = 1 & name = '* *'
 
//3. Obtain the parameter object on the page
this.$route.query
Copy the code

1.3 Pass values through the Params attribute

  • The matched route is determined by name in the route attribute
  • The ciphertext parameter is not displayed in the URL address
  • Disadvantages: Parameters disappear when the page is refreshed
//1. Route configuration file
{
     path: '/detail'.name: 'Detail'.component: Detail
   }
   
//2
this.$router.push({
  name: 'Detail'.params: {
    name: 'Joe'.id: 1,}})//3. Obtain the parameter object on the page
this.$route.params
Copy the code

1.4 summarize

  • Dynamic routing and Query attribute page refresh parameters are not lost, and params are lost
  • Dynamic routing is usually used to pass a single parameter (such as the ID of a detail page), while Query and Params can pass one or multiple parameters.