Vue climbing pit road 1-routing jump new page and secondary page configuration

I have also found some answers on the Internet before, which are relatively fragmented. I hereby summarize, not to say nonsense, and directly to the dry goods!

Routing jumps to a new page

First define router-view in app.vue, which is the main route.

Introduce the login home page template into the router's index.js and configure the home page template routing

Then configure the default display page in main.js

Configure a click event in login.vue, add a jump route, and then jump to the subject page. The subject component also needs to configure the route in index.js in the router like the login page, and the jump to the new page is completed.

Secondary routing configuration

Reasons encountered before configuring secondary pages

The subject page is this page. I didn't expect the routing to be nested at first. The configuration and the first-level login routing are at the same level. When I click the menu on the left, the routing jumps to a new page. It is found that there is no nested routing, because vue is a single-page application, all template pages are rendered in app.vue, so when I click on the left menu bar, the right template page is also rendered to app.vue by default , causing the template page on the right to be rendered to a brand new page.

Nesting of secondary pages

Because we jumped to the subject template page from the login page before, so in the subject template to perform the current page routing jump, we should configure the route of the left navigation as a sub-route of the subject template, as shown in the figure, then click the navigation , the content will be displayed on the right side, and will not jump to a new page.

 

Before doing this project, I also fiddled with Vue for a while, but there were a lot of problems when I actually did the project. The technology lies in practice, and it may not be written very well. Some principles are not very clear. If there is a deeper understanding in the future, I will make corrections. I also hope that friends who have a deeper understanding will give opinions, and I hope everyone can make progress together!

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=325728001&siteId=291194637