Click on the menu bar on the left, do not refresh the page, only change the body content, how to achieve?

Click the menu bar on the left, do not refresh the page, only change the body content, it is best to share the js and css, of the parent page instead of reloading, how to achieve? The current problem with
is that using the jquery.load () method to introduce a page will cause js to load repeatedly, adding 1 to the number of menu bar loads per click.
is there a more elegant solution than jquery.load (),?

Mar.20,2021

if you are using jquery, it is recommended to use template.js template or dust template;
implementation:

  • first build the main frame of the page in the html of the main page, that is, lay out the page as the left menu, head navigation, that is, this part of your picture:

clipboard.png

  • then define different template pages. When you click on the left navigation, you can switch between the templates that refresh the main content area
.

jquery.load () won't have this problem, as I did before Vue.

I guess the problem is that the page you load enters is not a "code snippet", but a complete page that you need to deal with.


you can encapsulate all the methods in body that need to load data into a separate method. When you click on the left sidebar, execute the method you encapsulated. In this way, local refresh can be achieved

Menu