用vuejs 構(gòu)建一個單頁面應(yīng)用，單頁面應(yīng)用頁面包括，頭部，左側(cè)導(dǎo)航，中間內(nèi)容區(qū)域，如圖1所示：

圖1

要求：1.當(dāng)左側(cè)導(dǎo)航欄列表過多的時候，出現(xiàn)滾動條，右側(cè)內(nèi)容超出的時候右側(cè)出現(xiàn)滾動條。如圖2,3所示，點(diǎn)擊左側(cè)列表的時候，右邊內(nèi)容變成左側(cè)菜單的字，如點(diǎn)擊“左側(cè)1”，右側(cè)中間布局就變成“這是左側(cè)1”,并且相應(yīng)點(diǎn)擊的li加上背景顏色，如圖4所示：

注意事項(xiàng)：1左側(cè)和中間布局高度默認(rèn)跟瀏覽器窗口的高度一樣，超出的時候才出現(xiàn)滾動條。2.點(diǎn)擊左側(cè)列表，通過路由來加載不同的組件。

左側(cè)滾動條

圖2

右側(cè)滾動條

圖3

圖4

參考資料：https://vuejs.org/

http://router.vuejs.org/