Shulou(Shulou.com)06/01 Report--

Today Xiaobian to share with you what the concept of vue nested routing is related knowledge points, detailed content, clear logic, I believe most people still know too much about this knowledge, so share this article for everyone to refer to, I hope you have some gains after reading this article, let's learn about it together.

The meaning of vue nested routing is: under a routing page, continue to use routing to load new components; nested routing can be understood as parent-child routing, and common multi-navigation interfaces are usually composed of multiple nested components.

Operating environment: Windows 10 system, Vue2.9.6 version, DELL G3 computer.

What is the meaning of nested routing?

Nested routing means that a route can continue to be used under a routed page, nesting means routing within a route.

In practical projects, multiple front-end pages are usually composed of multiple nested components due to requirements, especially multiple navigation interfaces. At this point, the advantages of vue-router are demonstrated.

Nested routing is under a routed page. The so-called nesting can also be understood as parent-child routing.

Why use nested routing

For example, in a page, in the upper part of the page, there are three buttons, and the lower part is based on clicking different buttons to display different content, then we can see in the lower part of this component as a nested route, that is to say, in this component below the need for another, when I click different buttons, their router-link components will be rendered to this.

How is the website introduced?

This is a good application interface in real life, usually composed of multiple nested components. Similarly, each dynamic path in the URL corresponds to each nested component according to a certain structure. As shown above.

That is, user represents the user page, and user can be regarded as a single page in vue. For a user, there must be a user. The foo (Xiaoming, Xiaohong) here represents a user. The profile here can be understood as a personal homepage. The posts here can be understood as the articles published by this person, and the title may be unchanged. For example, no matter switching to the articles published by this person or switching to this person's personal homepage, we all hope to display the same thing at the top. And when switching is the following part, this part we can use to write, then, this is nested routing.

With vue-router, this relationship can be easily expressed using nested routing configurations.

const User = { template: ` User {{ $route.params.id }} `}const router = new VueRouter({ routes: [ { path: '/user/:id', component: User, children: [ { //When/user/:id/profile matches successfully, // UserProfile will be rendered in User path: 'profile', component: UserProfile }, { //when/user/:id/posts match successfully // UserPosts will be rendered in User's path: 'posts', component: UserPosts }， //When/user/:id matches successfully, // UserHome will be rendered in User { path: '', component: UserHome }, // ... Other child routes ] } ]})

This is the first time I've seen it. Among them, the first code is placed in the file, which is the top-level exit, rendering components matched by advanced routes.

From the route configuration, we can see that when the path is/user/Xiaoming or/user/Xiaohong, User will be rendered to the page, and this rendering is the top-level route. (:id is Xiao Ming, Xiao Hong,).

Then there is a nested route in this page. Of course, if the url is/user/Xiaoming, then this secondary route will not display anything. If we want to render something even if it is only/user/Xiaoming, then we can set the route corresponding to path: "", so that even/user/Xiaoming can display more.

If we want to see Xiaoming's personal homepage, that is/user/Xiaoming/profile, then the UserProfile component will be rendered to this secondary route.

If we want to see the articles published by Xiaoming, that is,/user/Xiaoming/posts, then the UserPost component will be rendered to this secondary route, which is the secondary route.

Actually, there are so many concepts. Isn't it very simple?

However, the following points need to be noted:

1. As can be seen from the above code: In the component, we can get Xiaoming in user/Xiaoming/post through $ route.params.id, so that we can make personalized settings.

Nested paths that start with/are treated as root paths, which allows you to fully utilize nested components without having to set nested paths.

In other words: in the above code, we write path: "profile" under children, which is equivalent to splicing into/user/:id/profile. Of course, we can also write path: "/user/:id/profile" directly. The final result is the same, but I personally think the latter representation method can be used with clear observation structure. If there are too many nesting levels, errors may occur.

Note that you need to match an empty case, and then match a default component to avoid the problem of blank pages.

The above is "vue nested routing concept is what" all the content of this article, thank you for reading! I believe everyone has a great harvest after reading this article. Xiaobian will update different knowledge for everyone every day. If you want to learn more knowledge, please pay attention to 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.