Implementing parameter jump function in Vue project

Page Description:

​ Main page: name —> shishengzuotanhuichaxun

The data in the table on this page are obtained from the backend through the interface array object and rendered. Each row of data has a corresponding row id. Our goal is to jump to the corresponding sub-details page according to the different row ids of each row of data in the table.

Subpage (details page): name —> Cinfo

This page is the page to be rendered by calling the corresponding interface after getting the row id

Project introduction and reasons for using parameter jump:

This system uses Vue to build the project framework and uses the component library of the Vant mobile framework for development. The table in the main page is implemented using pure native HTML's th, tr, and td. The Vue directive v-for is used to traverse tr to render data to the table. Therefore, all the detail buttons corresponding to the rendered table data are the same, and the page after clicking is also the same, which violates the project business requirements. Therefore, the implementation of parameter passing is particularly critical. The principle of parameter passing operation is to use the same template (Cinfo), but due to different URL paths, the contents of each sub-page can not affect each other.

Implementation process:

step1:

In the js file under vue-router, modify the route of the sub-details page to:

Add ' /:id ' to the path attribute and add a new name attribute to add the id after the URL when redirecting to enter different sub-detail pages

Step 2:

In the main page, add parameters to the binding event of the detail button, and use the item in v-for, that is, the array object obtained through the interface, as the formal parameter in the click event method.

Notice:
1.@click=detail( item ), when binding a click event to a button, don’t forget to add the item parameter in the brackets!

2. The key value of path in the push() method here uses ES6 syntax –> template string (string literals that allow embedded expressions)

At this point, the row ID is passed as a parameter to the sub-details page after clicking the details button, as shown below:

step3:

Next, we need to get the ID passed from the main page in the sub-details page, use it as a request parameter to call the interface and render the data.

​ The operation to obtain the passed id is as follows:

​ Fixed writing method, don’t ask, I just don’t know how to write it (seek help from the experts!). . .

So far, we have implemented most of the operations of the parameter jump function. The remaining operations of calling the interface by id in the subpage and rendering the data will not be shown.

Summarize:

There are many methods. This method can only jump with a specific parameter, and cannot pass the entire array or object. If you have a better method, please share it. The overall implementation steps of jump with parameters are not difficult, the main thing is the idea. Due to my own lack of ability, this sharing may not be so accurate and detailed. If there are any errors, inappropriateness or ambiguity in the description of all the steps, please point out my mistakes. Thank you very much! Let’s work together and make progress together!

This is the end of this article about implementing the parameter jump function in the Vue project. For more relevant vue parameter jump content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!