SoFunction
Updated on 2025-04-06

Summary of the parameter transmission method and router usage skills of vue

vue parameter transfer method 1

1. Routing configuration

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

2. How to use

// Directly call $ to implement jumps carrying parameters this.$({
// This id is a variable, any value can be path: /describe/${id}`,
 })

3. Get method (on the describe page)

$

Use the above method to get the id value transmitted from the previous page

vue parameter transfer method 2

1. Routing configuration

 {
  path: '/describe',
  name: 'Describe',
  component: Describe
 }
(This place is configured by default,No need to do anything)

2. How to use

  this.$({
   name: 'Describe',
   params: {
   id: id
   }
  })

In the parent component: determine the matching route by the name in the routing attribute, and pass parameters through params.

3. Get method (on the describe page)

$

Just use params to get it;

Vue parameter transfer method three

1. Routing configuration

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

(Default configuration)

2. How to use

 this.$({
   path: '/describe',
   query: {
   id: id
   }
  })
(paramsChange it toquery)

3. Get method (on the describe page)

$

(The id is also obtained in this place using query. The difference between the previous params is that the id value obtained in query will be displayed in the url, and you can see the value you passed in)

Props value transfer method

Parent component

(Table-data can be named at will, not a specific value)

<div class="content">
//This is an ordinary component, where tabelData can be a variable or a constant, the same as pageInfo. It is planned to pass two values ​​here, but in fact it can also be passed in the form of an object. <my-table :table-data="tableData" :page-info="pageInfo" ></my-table>
</div>

Subcomponents

props: ['tableData', 'pageInfo'],
data() {
 return {
  tData: ,
  page: 
 }
}

Prop is one-way bound and should not be changed inside child components. However, the value passed by props here will change with the change of the value of the parent component and will change dynamically.

Tips for using $route

1,$

Type: string

A string, corresponding to the path of the current route, is always parsed into an absolute path, such as "/foo/bar".

2,$

Type: Object

A key/value object contains dynamic fragments and fully match fragments. If there are no routing parameters, it is an empty object.

3,$

Type: Object

A key/value object representing URL query parameters. For example, for the path /foo?user=1, there is $ == 1, and if there is no query parameter, it is an empty object.

4,$

Type: string

The hash value of the current route (with #) , and if there is no hash value, it is an empty string.

5,$

Type: string

Completed parsed URL, containing the complete path to query parameters and hash.

For details, please see (/zh-cn/api/

Summarize

The above is the method of transmitting vue and using routers introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website!