Tüm Makaleler,Bloglar, webigem Yazılım Şirketi

Blog Detay

  • Ana Sayfa
  • Vue Js de Yeni Sayfa Nasıl Oluşturulur?
Blog Images

Vue Js de Yeni Sayfa Nasıl Oluşturulur?

Vue Js de Yeni Sayfa Nasıl Oluşturabilirim?

Vue Js çalışan arkadaşların çoğu Yeni Sayfa oluştururken hatalar ile karşılaşıyor. Bunun nedeni ise Components veya Router de yolunu belirtmemesidir. Gelin Şimde hep berraber adımlarla bir sayfa oluşturalım.
1. src/router/views/demo.vue içinde demo.vue adında bir bileşen(component)  oluşturalım.
Örnek:
  <script>
        import Layout from '../../layouts/main'
        import PageHeader from '@/components/page-header'
    
        export default {
            components: { Layout, PageHeader },
        }
    </script>
    
    <template>
        <Layout>
            <PageHeader :title="title" :items="items" />
            This is New Page
        </Layout>
    </template>
2. /src/router/routes.js içinde rotayı (route) ayarlayalım.
Örnek:
{
    path: "/demo",
    name: "sample-page',
    meta: { authRequired: true },
    component: () => import('./views/demo')
},
3. Dikey Düzen ve Yatay Düzen'de sayfanın bağlantısını ekleyin. JSON nesnesine menü kimliği, etiket ve bağlantı ekleyin.

Dikey Düzen için (Vertical Layout):- /src/components/menu.js

Yatay Düzen için (Horizontal Layout) :- /src/components/horizontal-menu.js
Örnek:
{
    id: 1,
    label: "menuitems.demo.text",
    icon: "bx-file",
    link: "/demo"
},
4. src/locales/en.json dosyasına sayfa adını ekleyin.
Örnek:
{
    "menuitems": {
        "demo": {
            "text": "Demo"
        }
    }
},





Arkadaşlar, bu adımları izleyerek yeni Vue.Js sayfası oluşturmuş olduk.