【发布时间】：2020-02-18 03:55:03
【问题描述】：
我正在使用 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 来解决这个问题？
【问题讨论】：
标签： javascript vuejs2