Summary and solutions of various problems in Vue project

1. How to transfer the list to the details page

For example, when you go to the commodity details page from the commodity list page, you need to transfer a commodity ID;

< router link: to = {path: 'detail', query: {ID: 1} > > go to the detail page < / router link > copy the code

The path to the page ishttp://localhost:8080/#/detail?id=1, you can see that a parameter id = 1 is passed, and even if the page ID is refreshed, it will still exist. At this time, you can obtain the corresponding detail data through the ID on the C page. The way to obtain the ID isthis.$route.query.id

There are query, params + dynamic routing to transmit parameters in Vue.

Let’s talk about the difference between the two

1. Query switches routes through path and params switches routes through name

//Query switches routes through path
< router link: to = {path: 'detail', query: {ID: 1} > > go to the detail page < / router link >
//Params switches routes by name
< router link: to = {Name: 'detail', params: {ID: 1} > > go to the detail page < / router link > to copy the code

2. Query passedthis.$route.queryTo receive parameters, params through this$ route.params To receive parameters.

//Query through this$ route.query Receiving parameters
created () {
    const id = this.$route.query.id;
}

//Params through this$ route.params To receive parameters
created () {
    const id = this.$route.params.id;
}

3. URL display method of query parameter transfer: detail? Id = 1 & user = 123 & identity = 1 & more parameters
Params + URL mode of dynamic routing / detail / 123

4. Params must define parameters in dynamic routing, and then add parameters when routing jump, otherwise it will be a blank page

{      
    path: '/detail/:id',      
    name: 'Detail',      
    component: Detail    
}

Note that when params transmits parameters, if no parameters are defined in the routing, they can also be transmitted and received. However, once the page is refreshed, this parameter does not exist. This doesn’t work for actions that rely on parameters, because you can’t always ask the user not to refresh the page. For example:

//In the defined route, only one ID parameter is defined
{
    path: 'detail/:id',
    name: 'Detail',
    components: Detail
}

//Route parameter transfer in template,
//Passed an ID parameter and a token parameter
//ID is a parameter defined in the route, but token is not defined
< router link: to = {Name: 'detail', params: {ID: 1, token: '123456'} > > go to the detail page < / router link >

//Receive on details page
created () {
    //The following can be obtained normally
    //However, after the page is refreshed, the ID can still be obtained, and the token does not exist at this time
    const id = this.$route.params.id;
    const token = this.$route.params.token;
}

2. Cross domain problem of request server interface in local development environment

Vue cli configuration file vue.config.js Configure proxy property in

proxyTable: {
      //Starting with '/ API', proxy all requests to the target server
      '/api': {
        target: ' http://jsonplaceholder.typicode.com '// interface domain name
        Changeorigin: true, // enable cross domain
        pathRewrite: { 
          '^/api': ''
        }
      }
}
//As shown in the figure below, replace '/ API' with the above target address
// http://jsonplaceholder.typicode.com/api/xxxxxxxxxxx

Note: after configuration, be sure to close the original server and restart itnpm run devStart the project. Otherwise, it will not work.

3. Unified management of Axios encapsulation and API interface

Axios encapsulation is mainly used to help us intercept requests and responses.
In the interception of the request, we can carry the usertoken, post request header, QS serialization of post submitted data, etc.
In response interception, we can carry out unified error handling according to the status code and so on.
The unified management of Axios interface is a necessary process for a project. This is convenient for us to manage our interface. When the interface is updated, we don’t have to go back to our business code to modify the interface.
As there is a little more content here, I will put it in another article and send a link here.