Manchmal benötigt eine Anwendung Vorlagen für verschiedene Seiten. Um den Code nicht von Komponente zu Komponente zu kopieren, schreiben wir die Vorlage in die Hauptkomponente (normalerweise auch App.vue genannt) und verwenden <Router-Ansicht>, um verschiedene Ansichten darin zu ersetzen.
Wie wir sehen können, haben verschiedene Seiten einen gemeinsamen Header. Webseite.
Was ist, wenn wir mehrere Vorlagen für verschiedene Seiten oder Anwendungsstatus erstellen müssen? Das werden wir jetzt tun.
Zunächst benötigen wir eine Vue Js-Anwendung mit einem angeschlossenen Router.
? , , , , ( ) .
.
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>
(Computed) «script» ( , vue ).
- , — .
//_/src/App.vue
...
<script>
export default {
computed: {
//
layout(){
//
//( , )
return this.$route.meta.layout || "default-layout"
}
}
}
</script>
...
«template» — , layout.
//_/src/App.vue
<template>
<div id="app">
<!-- -->
<component :is="layout">
<router-view/>
</component>
</div>
</template>
...
Lassen Sie uns nun einige Vorlagen erstellen.
Der Einfachheit halber speichern wir sie in einem separaten Ordner "Layouts".
In Bezug auf die Wichtigkeit ist der Ordner nicht weit von Komponenten oder Ansichten entfernt, sondern nur praktisch.
Vue verfügt über ein Slot-Element, mit dem wir unsere Ansichten in eine Vorlagenkomponente einfügen können. Beim Rendern wird es durch Inhalt ersetzt, den wir beim Aufruf der Komponente angeben. Lassen Sie uns drei Vorlagen erstellen, die zur Verdeutlichung gleich sind, mit einem Unterschied in der Farbe der Kopf- und Fußzeile.
Blaue Vorlage, Standard:
//_/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>
Grünes Muster:
//_/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>
Rotes Muster:
//_/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>
Registrieren wir nun diese Vorlagenkomponenten in unserem 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')
Ausgezeichnet! Die Vorlagen sind fertig. Erstellen wir vier Ansichten (Seiten), von denen zwei mit einer blauen Vorlage und die anderen zwei mit einer roten und einer grünen Vorlage gerendert werden. Sie werden auch gleich sein, nur mit unterschiedlichen Titeln.
//_/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>
Jetzt fügen wir Routen für unsere Seiten hinzu und geben in den Metadaten an, welche Vorlage zum Rendern verwendet werden soll.
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
Wir starten unsere Anwendung und prüfen: Der
gesamte Code kann hier eingesehen werden