Detailed description of vue nested route-query transfer parameters, detailed description of vue Nested-query
In nested routing, we often encounter the parent route passing parameters to the Child route. There are two methods to pass parameters through query or params.
Index.html
<Div id = "app"> <! -- Router-view: Route entry. Components matching the route are rendered here --> <router-view> </div>
Main. js also displays the parent route through redirection.
Import Vue from 'vue 'import VueRouter from 'vue-router' vue. use (VueRouter) // introduce two components import home from ". /home. vue "import game from ". /game. vue "// define the route const routes = [{path:"/", redirect:"/home "}, // redirect {path:"/home ", component: home, children: [{path: "/home/game", component: game}] // create a route instance const router = new VueRouter ({routes }) new Vue ({el: '# app', data: {id: 123,}, methods :{}, router })
Home. vue transmits the num parameter as 1 through query, which is equivalent to splicing the parameter after the url address.
<Template> <div>
In the game. vue sub-path, this. $ route. query. num is used to display the passed parameters.
<Template>
After running, the passed parameters are displayed in the address bar.
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.