Terkadang sebuah aplikasi membutuhkan template untuk berbagai halaman, agar tidak menyalin kode dari komponen ke komponen, kami menulis template di komponen utama (alias, biasanya, App.vue) dan menggunakan <router-view> untuk menggantikan berbagai tampilan ke dalamnya.
Seperti yang bisa kita lihat, halaman berbeda memiliki header yang sama. Situs web.
Bagaimana jika kita perlu membuat beberapa template untuk halaman atau status aplikasi yang berbeda? Inilah yang akan kami lakukan sekarang.
Pertama-tama kita membutuhkan aplikasi Vue Js dengan router yang terhubung.
? , , , , ( ) .
.
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>
...
Sekarang mari buat beberapa template.
Untuk kenyamanan, kami akan menyimpannya di folder "tata letak" terpisah.
Dari segi pentingnya, folder tersebut tidak jauh dari komponen atau tampilan, hanya saja nyaman.
Vue memiliki elemen slot yang memungkinkan kita memasukkan pandangan kita ke dalam komponen template. Saat dirender, itu diganti dengan konten yang akan kita tentukan saat memanggil komponen. Mari buat tiga template, biarkan sama, dengan perbedaan warna header dan footer, untuk kejelasan.
Template biru, default:
//_/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>
Pola hijau:
//_/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>
Pola merah:
//_/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>
Sekarang mari kita daftarkan komponen template ini di 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')
Luar biasa! Templat sudah siap, mari buat empat tampilan (halaman), dua di antaranya akan ditampilkan dengan templat biru, dan dua lainnya dengan warna merah dan hijau. Mereka juga akan sama, hanya dengan judul yang berbeda.
//_/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>
Sekarang kami akan menambahkan rute untuk halaman kami, dan dalam metadata kami akan menunjukkan template mana yang akan digunakan untuk rendering.
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
Kami meluncurkan aplikasi kami dan memeriksa:
Seluruh kode dapat dilihat di sini