How to deal with the loss of parameters in Vue router routing parameter refresh page

Time:2021-12-4
catalogue
  • summary
  • Method 1: pass parameters through params
  • Method 2: pass parameters through query
  • Method 3: use props to cooperate with component routing decoupling

summary

Common scenario: click the details of the list to jump to the inner page of details, and the inner page obtains the detailed data according to the transmitted parameters.

Routing parameters are generally transmitted in the following ways. The following are mainly the parameter transmission methods of programming navigation router.push:

Method 1: pass parameters through params

The routing configuration is as follows:

{ 
    Path: '/ detail /: ID', // if Id is followed by? Indicates that this parameter is optional
    name: 'detail', 
    component: Detail 
}

Carry parameters through path in $router.push

//Parameters in the list
goDetail(row) {
    this.$router.push({
        path: `/detail/${row.id}`
    })
}

//Get parameters from the details page
this.$route.params.id

Pass parameters through params of $router.push

//List page transfer parameters
goDetail(row) {
    this.$router.push({
        name: 'detail',
        params: {
            id: row.id
        }
    })
}

//Details page access
this.$route.params.id

Note: for parameter transmission in this way, the path uses name, the path uses name, the path uses name, and the path cannot be obtained by using path; If /: ID is not added in the routing configuration, i.e. path: ‘detail’, the ID will not be displayed in the URL. You can still get the parameter ID on the details page, but the parameters are lost after refreshing.

In the above two methods, the parameter ID passed will be displayed after the URL, as shown in the figure:

The parameters passed are exposed in the web address.

If the params parameter /: ID is set in the route, but the parameter is not passed during the jump, the page will have no content or the jump will fail. You can add “yes” after it? Indicates that this parameter is optional, i.e. /: ID?

Method 2: pass parameters through query

//Routing configuration
{ 
    path: '/detail', 
    name: 'detail', 
    component: Detail 
}

//List page
goDetail(row) {
    this.$router.push({
        path: '/detail',
        query: {
            id: row.id
        }
    })
}

//Detail page
this.$route.query.id

Note: the parameters passed in this way will be displayed after the URL in the address bar? id=?, Similar to get parameter passing; Query must cooperate with path to pass parameters.

The parameter passed is an object or array

In another case, if an object or array is passed through query, it will be forcibly converted to [object object] in the address bar, and the object value cannot be obtained after refresh.

At this time, the parameters to be passed can be converted into strings through JSON. Stringify() method, and then converted into objects through JSON. Parse() on the details page.

let parObj = JSON.stringify(obj)
this.$router.push({
    path: '/detail',
    query: {
        'obj': parObj
    }
})

//Detail page
JSON.parse(this.$route.query.obj)

Although this method can transfer objects, if there is less data and more data, the address bar will be very long

Note: the route parameter obtained in all subcomponents is $route, not $router

Comparison of params and query parameter transfer methods above:

  • Pass the parameters through params + name of $router.push. If the params parameter is not set in the route, the parameters will not be spliced behind the route, but the page refresh parameter will be lost.
  • Carry the parameters through the path in $router.push or pass the parameters through query. The parameters will be spliced behind the address and the information will be exposed.

Method 3: use props to cooperate with component routing decoupling

//Routing configuration
{ 
    path: '/detail/:id',
    name: 'detail', 
    component: Detail,
    Props: true // if props is set to true, $route.params will be set as the component property
}

//List page
goDetail(row) {
    this.$router.push({
        path: '/detail',
        query: {
            id: row.id
        }
    })
}

//Detail page
export default {
    props: {
        //Decouple the parameter ID passed in the route to the props attribute of the component
        id: String
    },
    mounted: {
        console.log(this.id)
    }
}

In addition, you can also save the parameters in sessionstorage or localstorage to solve the problem of missing page refresh parameters, which can be combined with the actual project.

The above is how to deal with the loss of parameters on the refresh page of Vue router routing parameters. For more information about Vue, please pay attention to other related articles of developeppaer!