How to make different page templates in Angular or Vue?

Question

JavaScript

It often happens that not all pages on the site correspond to the same template.
For example, here and here a common template is clearly distinguished, which can be taken out into the main component of the application, and, often, there are a majority of such pages on the site.
But at the same time, there are pages that differ from the main template, for example, this one or this one , and there can be many differences, as well as similar features ( here and here the footer strip is the same, for example).
It is clear that this site admin template is given as an example and can be somewhat stretched, but still there is a problem. For example, I often met with such questions when developing online stores.
How to proceed in this case, if Vue2 or Angular2+ is used as a framework (including the page is initially rendered on a server running Node)?
I see 2 options:
1) Define page template in route components.
I don’t like this option because even when switching between similar pages, the entire DOM will still be “completely redrawn”, because the general template will be located inside the component to which a particular route sends us, and they are all different.
2) Show different template options based on a value that is defined through the global data bus (global service, vuex, application instance, etc.).
Here, a "full redraw" of the DOM will only occur when navigating between different pages, but the main application component will get larger as the number of different sections increases. Yes, and all sorts of v-if / ngIf will be full of. Well, I don't like the idea of ​​using some kind of global object to store the state.
Maybe someone can offer a more flexible and beautiful solution?

Answer 1

On the basis of routes, it is quite possible to work IMHO.
Those. you have a template that looks like:

<div>
<common-element></common-element>
<router-view></router-view>
</div>

Accordingly, all nested paths will be drawn inside the parent, and only they will be redrawn.
Plus, you can even monitor the current path in this template and show or hide some common elements or elements that need to be displayed only for a specific route or according to some condition.

Answer 2

Different templates with slots.
https://ru.vuejs.org/v2/guide/components.html#%D0%...