How does vue3 implement clicking on different menu pages to switch partial pages

Router View

We can use router to achieve

1. Prepare the page

Go to Ele.me (element-plus) to find your favorite page and import it as needed. Let’s implement it with your own example.
First import the layout container
insert image description here
and then the menu bar. Introduce
insert image description here
these two and see the effect first.
insert image description here
Now the basic page is ready.

2. Introduce router in js and allow container to use router

insert image description here
The container has this attribute, but the default value is false insert image description here
and the corresponding text in the menu bar is changed to <router-link>

insert image description here

Put <router-view></router-view> in the position where you want to change the page.
For example, I want to switch pages in the main block
insert image description here
and then prepare to switch component pages.
insert image description here
insert image description here
Configure the router path for each component.
insert image description here
Note that this must be done To configure the subpath of this view, if the configuration is at the same level as home, then when the menu bar is clicked, the entire page will be replaced with a component page. The project
directory is shown in the figure.
insert image description here
Home is the main view, and test and test1 are components for switching

running result

insert image description here

Guess you like

Origin blog.csdn.net/BeiWoFW/article/details/130353716