快捷導(dǎo)航

vue.js通過路由實(shí)現(xiàn)經(jīng)典的三欄布局實(shí)例代碼

更新時(shí)間：2018年07月08日 09:47:37 作者：章魚喵_

本文通過實(shí)例代碼給大家介紹了vue.js通過路由實(shí)現(xiàn)經(jīng)典的三欄布局，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧

經(jīng)典的三欄布局效果圖如下：

三欄布局

•將布局的各個(gè)區(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顯示相應(yīng)的組件

<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通過路由實(shí)現(xiàn)經(jīng)典的三欄布局實(shí)例代碼，希望對(duì)大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！

您可能感興趣的文章:

相關(guān)文章

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