Common scenario: Click details to switch to the details page and pass the ID parameter to obtain details.

Let’s start by looking at several ways to redirect:

1. Pass parameters in Params mode

$route.push path carries parameters (specified in route configuration)

Route configuration {path: '/detail/:id', // if id is followed by? Name: 'detail', component: name: 'detail', component: $route.push ({path: '/ Detail /${id}'})Copy the code

Note: in this way, the parameter follows the URL with /id. The parameter is not lost after the page is refreshed.

Pass parameters to params via $route.push (no parameter specified in route configuration)

$route.push ({name:'detail', params:{id:id}}) {$route.params.idCopy the code

Note: In this way of parameter transmission, name must be used to jump, and the route: ID is not configured. Id will not be displayed after the URL, and the parameter will be lost after the page is refreshed.

2. Pass the parameter in query mode

// Route configuration {path: '/detail', name: 'detail', Component: $route.push ({path:'/ Detail ', query:{id:id}})Copy the code

Note: The parameters of this approach take? The ID comes after the URL, similar to get, and the query must be passed using path. The parameters are not lost after the page is refreshed.

The arguments passed are objects or arrays

In other cases, if an object or array is passed as a query, it will be cast to object object in the address bar, and the page will not get the object value after refreshing.

We can then convert the argument to a string using the json.stringify () method and to an object using json.parse when we get the argument.

Let parObj = json.stringify (obj) // Redirect this.$router. Push ({path:'/detail', Parse (this.$route.query.obj) {query:{obj:parObj}})Copy the code

Note: This will allow you to pass objects, but the address bar will be very long if you have a lot of data (not recommended).

3. Decouple routes using props with components

Id is specified in the route configuration

{path:'/detail/:id', name:'detail', Component: detail, props:true $route. push({path: '/detail/${id}'}) export default {props:['id'], Mounted (){console.log("id",this.id); // Decouple_props (){console.log("id",this.id); // Decouple_props (){console.log("id",this.id); }}Copy the code

Id is not specified in the route configuration

{path:'/detail', name:'detail', Component: detail, props:true $route. push({name:'detail', params:{order:{id:'123456789', params:{id:'123456789', Export default {props:['order'], Mounted (){console.log("order",this.order); // Uncouple the order parameter to the props attribute of the component. }}Copy the code

Note: If the parameter id is specified in the route configuration, the parameter will not be lost after the page is refreshed. If the parameter is not specified in the route configuration, the parameter will be lost after the page is refreshed.

In addition, for parameters with a large amount of data, you can use sessionStorage or localStorage to store parameters to solve the problem of page refresh parameter loss, based on the actual project.