Vue: How to pass values ​​to the main file by routing components (two common ways)

In this way, you can use the routing parameter transfer method toThe main page delivers data. There are several ways to achieve this, and here are two common ways:

1. Use routing parameters:

In the routing definition, you can use routing parameters to pass data. First, you need to define the routing parameters in the routing configuration and then use it in the component$routeObject to access these parameters.

First, define a route with parameters in your routing configuration:

const routes = [
  {
    path: '/your-route',
    component: YourComponent,
    props: (route) => ({ customProp:  })
  }
];

In this example, we define a routing parametervalue, and thenpropsMap it tocustomProp。

Then, in your component you can pass$routeObject to access this parameter:

export default {
  props: ['customProp'],
  mounted() {
    ();
  }
}

When you visit/your-route?value=yourValuehour,customPropWill contain the passed value.

2. Use routing status:

You can also use routing state to pass data, which is suitable for situations where data needs to be shared between multiple components.

First, in the routing configuration, you can add one for each routemetaFields to store custom data:

const routes = [
  {
    path: '/your-route',
    component: YourComponent,
    meta: { customData: 'yourValue' }
  }
];

Then, in the component, you can pass$routeObject to access the routemetaFields:

export default {
  mounted() {
    (this.$);
  }
}

This way, you can access the same data in multiple components.

These areTwo common ways to pass data on the main page. You can choose one of these according to your needs to implement data transfer.

This is the article about Vue routing component passing values ​​to the main file. For more related content on Vue transfer values ​​to the main file, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!