Я работаю над многостраничным приложением, использующим Vue, и в моем проекте у меня есть каталог с именем "pages", который содержит подкаталоги для каждой страницы. Подкаталоги содержат свои собственные файлы App.vue и main.js, например:
src
|
+--pages
|
+--Home
| |
| +-- App.vue
| +-- main.js
|
+--About/
| |
| +-- App.vue
| +-- main.js
|
+--base.vue
Я приехал из Django-Land, где я могу иметь шаблон, содержащий большую часть информации о стиле, заголовки,и т.д., и я могу повторно использовать шаблон на страницах и вставлять контент, и я пытаюсь сделать то же самое здесь. У меня большая часть моего веб-сайта находится в base.vue, и я хочу иметь возможность отображать другой контент, как это предусмотрено другими страницами.
Например:
base.vue
<template>
<div>
Header text.
<div id="body">
</div>
</div>
</template>
<style>
@import '../assets/style.css';
</style>
<script>
...
</script>
И Home / App.vue
<template>
<div id="app">
<div id="body"> <-- replace for this in base.vue, and use the styles defined in base.vue.
New content
</div>
</div>
</template>
<style>
</style>
<script>
...
</script>
Таким образом, страница будет выглядеть примерно так:
Header text.
New content
Как бы я поступил так, используя Vue?