تبديل قالب الصفحة في vuejs

في بعض الأحيان ، يتطلب التطبيق قوالب لصفحات مختلفة ، حتى لا يتم نسخ الكود من مكون إلى آخر ، نكتب القالب في المكون الرئيسي (المعروف أيضًا باسم 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>

نحتاج إلى إضافة خاصية Computed جديدة إلى قسم "البرنامج النصي" (إذا لم تكن لديك ، فقم بنسخها من أي مكون 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 على عنصر فتحة يتيح لنا إدخال وجهات نظرنا في مكون قالب. عند تقديمه ، يتم استبداله بالمحتوى الذي سنحدده عند استدعاء المكون. لنقم بإنشاء ثلاثة قوالب ، دعهم يكونوا متماثلين ، مع اختلاف في لون الرأس والتذييل ، من أجل الوضوح.



القالب الأزرق ، الافتراضي:

//_/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

نطلق تطبيقنا ونتحقق مما يلي:







يمكن الاطلاع على الكود بالكامل هنا