有时应用程序需要用于不同页面的模板，以免在组件之间复制代码，我们在主组件（通常称为App.vue）中编写模板，并使用<router-view>替换各种视图。
如我们所见，不同的页面具有相同的标题。网站。
如果我们需要为不同的页面或应用程序状态制作多个模板怎么办？这就是我们现在要做的。
首先，我们需要一个带有连接路由器的Vue Js应用程序。
什么是模板？没错，根据特定条件将调用的常规组件是活动的流浪者，身份验证状态还是（每天）时间。
让我们准备使用模板的主要组件。
如果您使用Vue-Cli创建了一个项目，那么您的项目将如下所示：
//_/src/App.vue
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<router-view/>
</div>
</template>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
#nav {
padding: 30px;
}
#nav a {
font-weight: bold;
color: #2c3e50;
}
#nav a.router-link-exact-active {
color: #42b983;
}
</style>
我们需要在“脚本”部分添加一个新的计算属性（如果没有，请从任何vue组件中复制它）。
该属性将根据特定条件返回模板组件的名称，在此示例中，模板将附加到页面。
//_/src/App.vue
...
<script>
export default {
computed: {
//
layout(){
//
//( , )
return this.$route.meta.layout || "default-layout"
}
}
}
</script>
...
让我们编辑“模板”部分-向其中添加一个动态组件，该组件将根据布局值而变化。
//_/src/App.vue
<template>
<div id="app">
<!-- -->
<component :is="layout">
<router-view/>
</component>
</div>
</template>
...
现在，让我们创建几个模板。
为了方便起见，我们将它们存储在单独的“布局”文件夹中。
在重要性方面，该文件夹离组件或视图并不远，这很方便。
Vue具有slot元素，该元素使我们能够将视图注入模板组件中。渲染后，将替换为在调用组件时将指定的内容。为了清楚起见，让我们创建三个模板，让它们相同，但页眉和页脚的颜色有所不同。
蓝色模板，默认：
//_/src/layouts/Default.vue
<template>
<div>
<header>
<ul class="nav">
<li><router-link class="link" to="/"> </router-link></li>
<li><router-link class="link" to="/page2"> 1</router-link></li>
<li><router-link class="link" to="/page3"> 2</router-link></li>
<li><router-link class="link" to="/page4"> 2</router-link></li>
</ul>
</header>
<section class="content">
<!--, view-->
<slot/>
</section>
<footer>
</footer>
</div>
</template>
<script>
export default {
name: "Default"
}
</script>
<style scoped>
header{
background-color: blue;
height: 70px;
display: flex;
align-items: center;
}
footer{
background-color: blue;
height: 70px;
}
.content{
min-height: calc(100vh - 140px);
}
ul{
list-style: none;
margin: 0;
color: white;
}
li{
color: white;
display: inline;
margin: 0 5px;
}
.link{
color: white;
text-decoration: none;
}
</style>
绿色图案：
//_/src/layouts/Green.vue
<template>
<div>
<header>
<ul class="nav">
<li><router-link class="link" to="/"> </router-link></li>
<li><router-link class="link" to="/page2"> 1</router-link></li>
<li><router-link class="link" to="/page3"> 2</router-link></li>
<li><router-link class="link" to="/page4"> 2</router-link></li>
</ul>
</header>
<section class="content">
<!--, view-->
<slot/>
</section>
<footer>
</footer>
</div>
</template>
<script>
export default {
name: "green"
}
</script>
<style scoped>
header{
background-color: green;
height: 70px;
display: flex;
align-items: center;
}
footer{
background-color: green;
height: 70px;
}
.content{
min-height: calc(100vh - 140px);
}
ul{
list-style: none;
margin: 0;
color: white;
}
li{
color: white;
display: inline;
margin: 0 5px;
}
.link{
color: white;
text-decoration: none;
}
</style>
红色图案：
//_/src/layouts/Red.vue
<template>
<div>
<header>
<ul class="nav">
<li><router-link class="link" to="/"> </router-link></li>
<li><router-link class="link" to="/page2"> 1</router-link></li>
<li><router-link class="link" to="/page3"> 2</router-link></li>
<li><router-link class="link" to="/page4"> 2</router-link></li>
</ul>
</header>
<section class="content">
<!--, view-->
<slot/>
</section>
<footer>
</footer>
</div>
</template>
<script>
export default {
name: "Red"
}
</script>
<style scoped>
header{
background-color: red;
height: 70px;
display: flex;
align-items: center;
}
footer{
background-color: red;
height: 70px;
}
.content{
min-height: calc(100vh - 140px);
}
ul{
list-style: none;
margin: 0;
color: white;
}
li{
color: white;
display: inline;
margin: 0 5px;
}
.link{
color: white;
text-decoration: none;
}
</style>
现在让我们在Vue中注册这些模板组件。
//_/src/main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
//
import DefaultLayout from "./layouts/Default"
import GreenLayout from "./layouts/Green"
import RedLayout from "./layouts/Red"
//
Vue.component("default-layout", DefaultLayout)
Vue.component("green-layout", GreenLayout)
Vue.component("red-layout", RedLayout)
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App)
}).$mount('#app')
优秀的！模板已经准备好，让我们创建四个视图（页面），其中两个将用蓝色模板呈现，另外两个用红色和绿色模板呈现。它们也将相同，只是标题不同。
//_/src/views/page1.vue
<template>
<div>
<h1> </h1>
</div>
</template>
<script>
export default {
name: "Page1"
}
</script>
<style scoped>
</style>
//_/src/views/page2.vue
<template>
<div>
<h1> </h1>
</div>
</template>
<script>
export default {
name: "Page2"
}
</script>
<style scoped>
</style>
//_/src/views/page3.vue
<template>
<div>
<h1> </h1>
</div>
</template>
<script>
export default {
name: "Page3"
}
</script>
<style scoped>
</style>
//_/src/views/page4.vue
<template>
<div>
<h1> </h1>
</div>
</template>
<script>
export default {
name: "Page4"
}
</script>
<style scoped>
</style>
现在，我们将为页面添加路线，并在元数据中指示渲染时要使用的模板。
import Vue from 'vue'
import VueRouter from 'vue-router'
//
import Page1 from "../views/Page1"
import Page2 from "../views/Page2"
import Page3 from "../views/Page3"
import Page4 from "../views/Page4"
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Home',
component: Page1
//, , -
},
{
path: '/page2',
name: 'Page2',
component: Page2,
// -,
//
meta:{
layout: "green-layout"
}
},
{
path: '/page3',
name: 'Page3',
component: Page3,
meta:{
layout: "red-layout"
}
},
{
path: '/page4',
name: 'Page4',
component: Page4,
// ,
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
我们启动我们的应用程序并检查：
整个代码可以在这里查看