The second step has completed the installation and use of vue router routing, and now on the basis of the second step, we start to learn the nesting of routing.
Routing nesting
Usage scenario: In the tab, there are several navigation bars at the top, and the main body in the middle displays the content; at this time, the entire page is a route, and then click the tab to switch between different routes to display different content, this time is in the route Nested routing.
achieve:
①Create title1.vue and title2.vue in the view folder.
The contents of title1.vue and title2.vue are:
② In router→index.js, introduce the two new components above and fill in the path,
The Title1sum here Title2is used as test.vuea sub-route of the page, so it should be written under the childrenattribute.
Pay attention not to fill in the childrensub-routepath/
③Then we go to test.vue and knock:
When towriting the routing path later, be sure to bring the absolute path, that is, to write testthe parent routing path"/test/title1"
Finally completed.
Enter http://localhost:8080/#/test
Click on heading 1, the following display
