What are the several ways to pass values ​​in Vue routing?

Vue routing method of passing value: 1. Use "router-link" routing navigation to pass; 2. Call "$router.push" to realize routing parameter value; 3. Match the name in the routing attribute Route, and then pass the parameter value according to params; 4. Pass the parameter value through query.

The operating environment of this tutorial: windows7 system, vue2.9.6 version, DELL G3 computer.

Vue routing method of passing parameter values

1. Router-link routing navigation

Parent component: Use b7bb66d8ac03527b6c70b0d099c465d4d625018d6d57dc2163f3a71531b24864

For example: e756d52f1f9f49587ff16d14ff392c30routerlink transfer parametersd625018d6d57dc2163f3a71531b24864

Subcomponent: this.$route.params.num receives Parameters passed by the parent component

mounted () {
  this.num = this.$route.params.num
}

Routing configuration:：{path: '/a/:num', name: A, component: A}

Display in the address bar:：http://localhost:8080/#/a/123

## 2. Call $router.push to implement route parameter passing

Parent component: Bind click event and write jump code

<button @click="deliverParams(123)">push传参</button>
  methods: {
    deliverParams (id) {
      this.$router.push({
        path: `/d/${id}`
      })
    }
  }

Child Component: this.$route.params.id receives the parameters passed by the parent component

mounted () {
  this.id = this.$route.params.id
}

Route configuration:：{path: '/d/:id' , name: D, component: D}

Display in the address bar:：http://localhost:8080/#/d/123

3. Match the route through the name in the routing attribute, and then pass the parameters according to params

Parent component: Match Routing configured attribute name

<button @click="deliverByName()">params传参</button>
    deliverByName () {
      this.$router.push({
        name: &#39;B&#39;,
        params: {
          sometext: &#39;一只羊出没&#39;
        }
      })
    }

Subcomponent:

<template>
  <div id="b">
    This is page B!
    <p>传入参数：{{this.$route.params.sometext}}</p>
  </div>
</template>

Routing configuration: There is no need to add incoming parameters after the path, but The name must be consistent with the name in the parent component
{path: '/b', name: 'B', component: B}

Display in the address bar : It can be seen that the address bar will not contain the incoming parameters, and the parameters will be lost after refreshing the page again
http://localhost: 8080/#/b

4. Pass parameters through query

Parent component:

<button @click="deliverQuery()">query传参</button>
    deliverQuery () {
      this.$router.push({
        path: &#39;/c&#39;,
        query: {
          sometext: &#39;这是小羊同学&#39;
        }
      })
    }

Subcomponent:

<template>
  <div id="C">
    This is page C!
    <p>这是父组件传入的数据: {{this.$route.query.sometext}}</p>
  </div>
</template>

Routing configuration: No modification is required
{path: '/c', name: 'C', component: C}

Display in the address bar: (Chinese transcoded)
http://localhost:8080/ #/c?sometext=This is Xiaoyang classmate

Related recommendations: "

vue.js tutorial"

The above is the detailed content of What are the several ways to pass values ​​in Vue routing?. For more information, please follow other related articles on the PHP Chinese website!