vue three kinds of parameter passing mode

<p @click="btn(id)"></p>

　　

The first: to determine a match in the routing by routing attribute name (not recommended actual development)

　　Subassembly receiving parameters $ route.name

   {
      path: '/news',
      name: 'News',
      component:News
    }, 

　　Subcomponents reception:

<p>{{$route.name}}</p>

　　The second: to attributes of the router-link

　　Routing configuration corresponding to:

  {
     path: '/describe',
     name: 'Describe',
     component: Describe
   }

　　Determining routes that match the route name attribute, to pass parameters params (params is an object, which is key: value of form):

<router-link :to="{name:'Describe',params:{username:'name',id:'id'}}">goHome</router-link> |

　　Subcomponents reception:

this.$route.params.username

. this $ route.params.id 
or page displayed in the form of direct interpolation <p> {{$ route.params.username} } - {{$ route.params.id}} </ p>

　　

The second: The url parameter passing

  {
     path: '/ describe: / newsID (\\ d +) /: newsTitle', where n is restricted to only pass digital id
     name: 'Describe',
     component: Describe
   }

　　Route parameters:

<router-link to="/describe/19/hi"></router-link>

　　Sub-assemblies accept parameters ($ route.params):

<p>{{$route.params.newsId}}-{{$route.params.newsTitle}}</p>

Third: routing component uses the path to match, then the parameters passed by query. Parameters are displayed? In this case behind url id =?

      this.$router.push({
          path: '/describe',
          query: {
            id: id
          }
        })

　　Routing configuration corresponding to:

  {
     path: '/describe',
     name: 'Describe',
     component: Describe
   }

　　Subassembly reception parameters:

this.$route.query.id