bố cục ứng dụng cấu trúc vue.js

Question

Tôi muốn xây dựng ứng dụng web của mình với Holy Grail layout, chỉ với một thanh bên và không có chân trang. Thanh bên sẽ được sử dụng làm thanh điều hướng, cũng như để giữ tùy chọn tương tác cho nội dung sẽ được hiển thị ở giữa bố cục, tùy thuộc vào liên kết hiện được chọn. Có nghĩa là, khi chọn liên kết để điều hướng đến trong thanh điều hướng, nó sẽ ảnh hưởng đến nội dung được hiển thị trong thanh bên cho các tùy chọn tương tác tùy chỉnh và nội dung chính ở giữa.

Đối đạt được điều này tôi đã đưa ra vài phương pháp:

1. Cách tiếp cận 1:
   • Có một Vue dụ
   • Có một thành phần Layout tạo bố trí của chúng tôi, với Header và Navbar cho các thành phần phụ.
   • Vue của chúng tôi dụ sẽ sử dụng một router với một con đường cho mỗi liên kết xuất hiện trong thanh điều hướng bên
   • Vue của chúng tôi chẳng hạn sẽ làm cho mộtrouter-view thành phần để hiển thị các thành phần đường dẫn hiện tại
   • Mỗi route sẽ hiển thị một thành phần mẫu của nó đang sử dụng thành phần Layout được tạo trước đây của chúng tôi và đưa vào tùy chọn điều hướng thích hợp và nội dung chính bằng cách sử dụng các vị trí.

Layout thành phần:

<template> 
<div class="app-layout"> 
    <header-component></header-component> 
    <div class="main"> 
     <navbar-component> 
     <slot name="navigation-menu"></slot> 
     </navbar-component> 
     <main> 
     <slot name="main-content"></slot> 
     </main> 
    </div> 
    </div> 
</template> 

<script> 
    import Header from './Header.vue'; 
    import Navbar from './Navbar.vue'; 
    export default { 
    name: 'Layout', 
    components: { 
     'header-component': Header, 
     'navbar-component': Navbar 
    } 
    }; 
</script> 

<style lang="sass" rel="stylesheet/scss" scoped> 
    some styling to achieve our layout for the present tags in the template 
</style> 

Header thành phần:

<template> 
    <header v-once class="header"> 
    <router-link to="/"> 
     Brand 
    </router-link> 
    </header> 
</template> 

<script> 
    export default { 
    name: 'Header' 
    }; 
</script> 

<style lang="sass" rel="stylesheet/scss" scoped> 
    some styling to achieve our layout for the present tags in the template 
</style> 

Navbar thành phần:

<template> 
    <nav class="navigation"> 
    <div class="links"> 
     // iterate on some property of this component, and create a list of links 
    </div> 
    <div class="menu"> 
     <slot name="navigation-menu"></slot> 
    </div> 
    </nav> 
</template> 

<script> 
    export default { 
    name: 'Navbar' 
    }; 
</script> 

<style lang="sass" rel="stylesheet/scss" scoped> 
    some styling to achieve our layout for the present tags in the template 
</style> 

Vue dụ với định tuyến:

import link1Component from './components/Link1ComponentUsingLayout.vue'; 
import link2Component from './components/Link2ComponentUsingLayout.vue'; 
import link3Component from './components/Link3ComponentUsingLayout.vue'; 

const router = new VueRouter({ 
    mode: 'history', 
    routes: [ 
    { 
     path: '/', 
     redirect: '/link1' 
    }, 
    { 
     path: '/link1', 
     name: 'link1', 
     component: Link1ComponentUsingLayout 
    }, 
    { 
     path: '/link2', 
     name: 'link2', 
     component: Link2ComponentUsingLayout 
    }, 
    { 
     path: '/link3', 
     name: 'link3', 
     component: Link3ComponentUsingLayout 
    } 
    ] 
}); 

export default new Vue({ 
    el: '#app', 
    router, 
    render: h => h('router-view') 
}); 

2. Phương pháp 2:
   • Có hai trường hợp Vue
   • Có ra bố trí như một html tĩnh bên trong chỉ mục.html thay vì một thành phần
   • Mỗi phiên bản Vue sẽ sử dụng bộ định tuyến (một cho mỗi), với đường dẫn cho mỗi liên kết có trong thanh điều hướng
   • Một trong các trường hợp sẽ được gắn trên html bên trong điều hướng sidebar trong html tĩnh của chúng tôi, và một bên trong khu vực nội dung trung tâm
   • Mỗi phòng trong số các trường hợp Vue sẽ làm mộtrouter-view thành phần để hiển thị các thành phần đường dẫn hiện tại
3. Cách tiếp cận 3:
   • Có một ví dụ
   • Vue của chúng tôi dụ Vue sẽ sử dụng một router với một con đường cho mỗi liên kết xuất hiện trong thanh điều hướng bên
   • Hoặc Vue dụ sẽ template sẽ đại diện cho cách bố trí của chúng tôi và bên trong sidebar navigation, và trung tâm khu vực nội dung chúng ta sẽ có 2 router-view thành phần
   • trường Vue của chúng tôi sẽ hiển thị cả sidebar navigation, và nội dung trung tâm là những thành phần cho các đường dẫn hiện tại
4. Phương pháp 4:
   • Tương tự như Phương pháp 3, ngoại trừ không sử dụng bộ định tuyến và sử dụng các thành phần động để chuyển đổi giữa thanh điều hướng và thành phần khu vực trung tâm, bất cứ khi nào liên kết bên trong điều hướng được nhấp.

Bây giờ, tôi đã tự hỏi mà cách tiếp cận sẽ là tốt nhất và tại sao? Ngoài ra tôi muốn nghe các cách tiếp cận mới nếu bạn có bất kỳ và giải thích lý do tại sao chúng tốt hơn.

Answer 1

Càng nhiều càng tốt, đừng cấu trúc mã của bạn xung quanh bố cục của bạn. Đó là takeaway tôi sẽ hy vọng cho bạn.

Tôi có xu hướng sử dụng cơ bản 2 nhưng một cấp độ sâu (như 3). Tôi có một thành phần ứng dụng để tải công cụ vue từ thư mục components. Ở đó tôi có một router-view trong chính để hiển thị các tuyến đường, một thành phần tiêu đề cho tiêu đề và thanh điều hướng, và một thành phần phương thức ở dưới cùng của chính.