In-depth analysis of Vue routing parameters and props decoupling

There are many different opinions on several ways to route parameters. Today, let’s summarize the several ways to pass parameters and decouple the routing:

1. Routing parameters

In general, there are two ways to route arguments, query and params, which are used to coordinate declarative navigation and programmatic navigation, and each has several different writing methods;

query pass

query with declarative navigation

//Routing configuration {
    path: '/a01',
    name: 'a01',
    component: a01
  }

//Parameter transfer method 1--Split by url splicing, use? <router-link to="/a01?data=a01">a01</router-link>
 //Passing parameter method 2--Passing object<router-link :to="{ path: '/a01', query: { data: 'a01' } }">a02</router-link>

query with programming navigation

The routing configuration method remains unchanged;

//Binding event<span @click="btn('/a01', 'a01')">b01</span>
//Processing routing method 1, cooperate with query through path btn(path, data) {
      this.$({
        path,
        query: {
          data,
        },
      });
    },
 //Processing routing method 2, cooperate with query through name    btn1(name, data) {
      this.$({
        name,
        query: {
          data,
        },
      });
    },

Characteristics of query transmission

1. The parameters are displayed in the url and used? segmentation. Attributes and values ​​exist in key-value pairs

2. The child component obtains parameters through $ (xxx is the parameter name defined by itself)

params transfer

Params parameter transmission is divided into two situations: the path placeholder and non-placeholder

When the path uses parameter placeholder

Params cooperate with declarative navigation:

//The routing statement needs to use ':' placeholder{
    path: '/a02/:data',
    name: 'a02',
    component: a02
  }

//Parameter transfer method 1--url splicing, no need?  segmentation<router-link to="/a02/a02">a02</router-link>
//Transfer method 2--Transfer object<router-link :to="{ path: '/a02/a02' }">a02.1</router-link>

Params cooperate with programming navigation:

  btn1(name, data) {
      this.$({
        name,
        params: {
          data,
        },
      });
    },

Characteristics of params transfer and parameter matching path placeholder:

1. Parameters are displayed in the url, no? =Equal extra tags

2. The child component obtains parameters in the $ way (xxx is the parameter name defined by itself)

When the path does not use the placeholder

Declarative navigation

<router-link :to="{ name:'a02',params:{data:'a02'} }">a02.1</router-link>

Notice! ! You need to use name, but you cannot use path. The official website explains it as follows:

Note: If path is provided, params will be ignored. You need to provide the routed name or handwritten path with parameters.

Programming Navigation

//Routing configuration{
    path: '/a03',
    name: 'a03',
    component: a03
  }
  //Route jump <span @click="btn3('a03', 'a03')">b04</span>
 btn3(name, data) {
      this.$({
        name,
        params: {
          data,
        },
      });
    },

Characteristics of params transfer and placeholding:

1. Whether the parameters are in the url

2. Data is lost after refresh

2. Props decoupling

The components of vue can be reused, but after routing the values ​​to the subcomponents, obtaining the parameters through $route will cause the subcomponents to be reusable. To solve this problem, props decoupling is required;

Boolean value

Specific use:

1. Use props when routing configuration

{
    path: '/a02/:data',
    name: 'a02',
    component: a02,
    //Use props to pass parameters    props: true
  }

2. The parent component passes parameters without any change

3. Subcomponents receive using props

<template>
  <p>{{ data }}</p>
</template>
<script>
export default {
  props: {
    data: {
      type: String,
    },
  },
};
</script>

props is a boolean value true to enable props reception, false is turned off.

In the above example, we demonstrated this situation. However, when props are boolean, they only apply to params parameter transmission, and are not applicable to query;

Function mode

Props is configured as a function, which can obtain the value passed in query mode, through

//Configuration {
    path: '/a01',
    name: 'a01',
    component: a01,
    props: (route) => ({ data:  })
  }
//Transfer--Consistent with query<router-link to="/a01?data=a01">a01</router-link>
//take over<template>
  <p>{{ data }}</p>
</template>
<script>
export default {
  props: {
    data: {
      type: String,
    },
  },
};
</script>

Object pattern

The props object mode directly passes fixed values, and there is no need to pass parameters again;

//Configuration {
    path: '/a01',
    name: 'a01',
    component: a01,
    props: {data:'123'}
  }

The above is all the content shared this time. If there are any errors, please send a private message to correct me at any time. I am very grateful.

This is the introduction to this article about in-depth analysis of Vue routing parameters and props decoupling. For more related Vue routing parameters, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!