Shulou(Shulou.com)05/31 Report--

This article mainly introduces how vue passes value through params and query related knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe that after reading this vue how to pass value through params and query article will have a harvest, let's take a look at it.

Vue passes a value through a route

It is necessary to carry parameters at the same time of many jumps, and the parameters are not lost at the time of refresh.

$router: is the routing operation object, and only writes to the object

$route: routing information object, read-only object

one。 Pass parameters through query to refresh without losing parameters

On the page where you need to pass a value:

This.$router.push ({path:'/ tasks',// jumps to query through path: {id: id, formId: formId}})

Set router:

{path:'/ tasks', name: 'tasks-detail', component: () = > import (' @ / views/todo/detail.vue')}

Parameters will be displayed in this format in the address bar, much like a get request

Get the parameters by using this.$route on the jump page.

Because it is stored in the address bar, the refresh will also be obtained through this.$route.

two。 Pass parameters through params to refresh without losing parameters

If you want to refresh, you can still get it. In fact, the parameter stored in another form of the address bar is on the page where the value needs to be passed:

This.$router.push ({path: `/ tasks/$ {item.id} / ${item.formId}`,})

Set router:

{path:'/ tasks/:id/:formId', name: 'tasks-detail', component: () = > import (' @ / views/todo/detail.vue')}

The parameters will be displayed in this format in the address bar, one by one

Similarly, the refresh will not change. If the refresh parameter is passed through params, the refresh parameter will be lost, like the following

Path:'/tasks',params: {id: item.id, formId: item.formId} three. Using both params and query to pass parameters to refresh without losing parameters

If you want to refresh, you can still get it, which is also another form of the address bar on the page where you need to pass a value:

This.$router.push ({path:'/ tasks/' + item.id, query: {formId: item.formId},})

Set router:

{path:'/ tasks/:taskId', name: 'tasks-detail', props: (route) = > ({... route.query,... route.params}), / / you can use props combined with the extension operator to obtain the parameter component: () = > import (' @ / views/todo/detail.vue')}

The parameters will be displayed in this format in the address bar

Similarly, the refresh will not change, the address bar can better see the combined version, this mixed use of props is more convenient to receive values

This is the end of the article on "how vue passes values through params and query". Thank you for reading! I believe you all have a certain understanding of the knowledge of "how to transmit value through params and query". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.