vue.js通過路由實現(xiàn)經(jīng)典的三欄布局實例代碼
更新時間：2018年07月08日 09:47:37 作者：章魚喵_
本文通過實例代碼給大家介紹了vue.js通過路由實現(xiàn)經(jīng)典的三欄布局，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧
經(jīng)典的三欄布局效果圖如下：
三欄布局
•將布局的各個區(qū)塊定義成組件
<template id="header">
<div class="header bg-primary text-center">
<h3>頭部區(qū)域</h3>
</div>
</template>
<template id="left">
<div class="left bg-danger col-lg-2">
<h3>側(cè)邊欄區(qū)域</h3>
</div>
</template>
<template id="main">
<div class="main bg-info col-lg-10">
<h3>主體區(qū)域</h3>
</div>
</template>
•用router-view顯示相應的組件
<div id="app"> <router-view name="header"></router-view> <router-view name="left"></router-view> <router-view name="main"></router-view> </div>
•定義路由規(guī)則
let router = new VueRouter({
routes: [
{
path: '/',
components: {
'header': header,
'left': left,
'main': main
}
}
]
});
總結(jié)
以上所述是小編給大家介紹的vue.js通過路由實現(xiàn)經(jīng)典的三欄布局實例代碼，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！
相關(guān)文章
這篇文章主要介紹了Vue SPA 首屏優(yōu)化方案的的相關(guān)資料，幫助大家更好的理解和學習使用vue，感興趣的朋友可以了解下2021-02-02
vue 動態(tài)添加的路由頁面刷新時失效的原因及解決方案
這篇文章主要介紹了vue動態(tài)添加的路由頁面刷新時失效的原因及解決方案，幫助大家更好的理解和學習使用vue，感興趣的朋友可以了解下2021-02-02
這篇文章主要介紹了vue中v-model動態(tài)生成的實例詳解的相關(guān)資料,希望通過本文能幫助到大家，讓大家理解掌握這部分內(nèi)容，需要的朋友可以參考下2017-10-10
這篇文章主要介紹了axios攜帶cookie配置詳解(axios+koa)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
這篇文章主要為大家介紹了Vue3.0組件通信mitt源碼ts實例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
在瀏覽器console中如何調(diào)用vue內(nèi)部方法
這篇文章主要介紹了在瀏覽器console中如何調(diào)用vue內(nèi)部方法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
在Vue3中可以使用ref函數(shù)來創(chuàng)建一個響應式的變量,通過將ref函數(shù)應用于一個組件實例,我們可以獲取到該組件的實例對象,這篇文章主要給大家介紹了關(guān)于vue3?ref獲取組件實例的詳細圖文教程,需要的朋友可以參考下2023-10-10
vue是法語中視圖的意思，Vue.js是一個輕巧、高性能、可組件化的MVVM庫，同時擁有非常容易上手的API。下面這篇文章主要給大家總結(jié)了Vue在開發(fā)過程中遇到的疑惑知識點,有需要的朋友可以參考借鑒，下面來一起看看吧。2017-01-01
這篇文章主要介紹了在vue項目中引用Antv G2,以餅圖為例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
vue cli3.x打包后如何修改生成的靜態(tài)資源的目錄和路徑
這篇文章主要介紹了vue cli3.x打包后如何修改生成的靜態(tài)資源的目錄和路徑，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04