How to handle the loss of parameters when refreshing the page when passing parameters to vue router

Overview

Common scenarios: Click on the details of the list to jump to the details page, and get the detailed data based on the passed parameters on the inner page.

There are generally several ways to pass route parameters. The following mainly introduces the parameter passing method of programmatic navigation router.push:

Method 1: Pass parameters via params

The routing configuration is as follows:

{ 
    path: '/detail/:id', //If id is followed by ?, it means this parameter is optional name: 'detail', 
    component: Detail 
}

By using the path parameter in $router.push

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

// Get the parameter this.$route.params.id on the details page

Pass parameters through params of $router.push

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

// Get this.$route.params.id on the details page

Note: For this method of parameter passing, the path uses name, the path uses name, and the path uses name. If path is used, it will not be obtained; if /:id, that is, path: 'detail', is not added in the routing configuration, the id will not be displayed in the URL. The parameter id can still be obtained on the details page, but the parameter is lost after refreshing.

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

The passed parameters will be exposed in the URL.

If the params parameter /:id is set in the route, but the parameter is not passed when jumping, it will cause the page to have no content or the jump to fail. Can you add it at the end? Indicates that this parameter is optional, i.e. /:id?

Method 2: Passing parameters through query

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

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

//Details 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 be used with path to pass parameters.

The parameter passed is an object or an array

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

At this time, you can use the JSON.stringify() method to convert the parameters to be passed into a string and then use JSON.parse() to convert it into an object on the details page.

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

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

Although this method can pass objects, it is fine if the data is small, but if the data is large, the address bar will be very long.

Note: In all subcomponents, the route parameters are obtained by $route instead of $router

Comparison of the above params and query parameter passing methods:

• Pass parameters through params + name of $router.push. If the params parameter is not set in the route, the parameters will not be spliced ​​after the route, but the page refresh parameters will be lost.
• If you carry parameters in the path of $router.push or pass parameters through query, the parameters will be concatenated after the address, which will expose information.

Method 3: Use props to decouple component routes

//Route configuration{ 
    path: '/detail/:id',
    name: 'detail', 
    component: Detail,
    props: true // If props is set to true, $route.params will be set as component properties}

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

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

In addition, you can also solve the problem of page refresh parameter loss by storing the parameters in sessionStorage or localStorage. You can refer to the actual project for details.

The above is the details of how to handle the loss of parameters when refreshing the page of vue router routing. For more information about vue, please pay attention to other related articles on 123WORDPRESS.COM!