快捷導(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)典的三欄布局，代碼簡單易懂，非常不錯(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í)例代碼，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時(shí)回復(fù)大家的！

您可能感興趣的文章:

相關(guān)文章

Vue SPA 首屏優(yōu)化方案
這篇文章主要介紹了Vue SPA 首屏優(yōu)化方案的的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)使用vue，感興趣的朋友可以了解下
2021-02-02
vue 動態(tài)添加的路由頁面刷新時(shí)失效的原因及解決方案
這篇文章主要介紹了vue動態(tài)添加的路由頁面刷新時(shí)失效的原因及解決方案，幫助大家更好的理解和學(xué)習(xí)使用vue，感興趣的朋友可以了解下
2021-02-02
vue中v-model動態(tài)生成的實(shí)例詳解
這篇文章主要介紹了vue中v-model動態(tài)生成的實(shí)例詳解的相關(guān)資料,希望通過本文能幫助到大家，讓大家理解掌握這部分內(nèi)容，需要的朋友可以參考下
2017-10-10
axios攜帶cookie配置詳解(axios+koa)
這篇文章主要介紹了axios攜帶cookie配置詳解(axios+koa)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-12-12
Vue3.0組件通信mitt源碼ts實(shí)例解析
這篇文章主要為大家介紹了Vue3.0組件通信mitt源碼ts實(shí)例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-11-11
在瀏覽器console中如何調(diào)用vue內(nèi)部方法
這篇文章主要介紹了在瀏覽器console中如何調(diào)用vue內(nèi)部方法，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-07-07
vue3?ref獲取組件實(shí)例詳細(xì)圖文教程
在Vue3中可以使用ref函數(shù)來創(chuàng)建一個(gè)響應(yīng)式的變量,通過將ref函數(shù)應(yīng)用于一個(gè)組件實(shí)例,我們可以獲取到該組件的實(shí)例對象,這篇文章主要給大家介紹了關(guān)于vue3?ref獲取組件實(shí)例的詳細(xì)圖文教程,需要的朋友可以參考下
2023-10-10
Vue開發(fā)過程中遇到的疑惑知識點(diǎn)總結(jié)
vue是法語中視圖的意思，Vue.js是一個(gè)輕巧、高性能、可組件化的MVVM庫，同時(shí)擁有非常容易上手的API。下面這篇文章主要給大家總結(jié)了Vue在開發(fā)過程中遇到的疑惑知識點(diǎn),有需要的朋友可以參考借鑒，下面來一起看看吧。
2017-01-01
在vue項(xiàng)目中引用Antv G2,以餅圖為例講解
這篇文章主要介紹了在vue項(xiàng)目中引用Antv G2,以餅圖為例講解，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-10-10
vue cli3.x打包后如何修改生成的靜態(tài)資源的目錄和路徑
這篇文章主要介紹了vue cli3.x打包后如何修改生成的靜態(tài)資源的目錄和路徑，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04