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>側邊欄區(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
}
}
]
});
總結
以上所述是小編給大家介紹的vue.js通過路由實現(xiàn)經(jīng)典的三欄布局實例代碼，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！
相關文章
這篇文章主要介紹了nuxt 路由、過渡特效、中間件的實現(xiàn)代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
vue2模擬vue-element-admin手寫角色權限的實現(xiàn)
本文主要介紹了vue2模擬vue-element-admin手寫角色權限的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-07-07
這篇文章主要介紹了vue 之 .sync 修飾符的相關知識，非常不錯，具有參考借鑒價值 ,需要的朋友可以參考下2018-04-04
這篇文章主要介紹了Vue3網(wǎng)站首頁布局開發(fā)，上篇文章已經(jīng)提到集成Ant Design Vue后，和Element Ui一樣，還是組件的使用，接下倆我們就來看看Vue3網(wǎng)站首頁布局開發(fā)的相關資料,需要的朋友可以參考下面文章的具體內容2021-10-10
Vue報錯：Uncaught TypeError: Cannot assign to read only propert
這篇文章主要給大家介紹了關于Vue報錯：Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>' 的解決方法，文中介紹的非常詳細，需要的朋友們下面來一起看看吧。2017-06-06
vue中實現(xiàn)支持txt,docx,xlsx,mp4格式文件預覽功能(純前端)
對于Vue你可以實現(xiàn)文件的預覽功能,這篇文章主要給大家介紹了關于vue中實現(xiàn)支持txt,docx,xlsx,mp4格式文件預覽功能的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-11-11
這篇文章主要為大家介紹了springboot?vue接口測試前端模塊樹和接口列表，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-05-05
小編這次要給大家分享的是如何實現(xiàn)vue2.x數(shù)組劫持，文章內容豐富，感興趣的小伙伴可以來了解一下，希望大家閱讀完這篇文章之后能夠有所收獲2023-01-01
Vite創(chuàng)建Vue3項目及Vue3使用jsx詳解
vite是新一代的前端構建工具,下面這篇文章主要給大家介紹了關于Vite創(chuàng)建Vue3項目以及Vue3使用jsx的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-08-08
在 Vue.js 中，$router 和 $route 是兩個常用的對象，用于處理路由相關的操作，下面小編就來和大家介紹一下$router 和 $route 的區(qū)別以及如何使用它們吧2023-06-06