用vuejs 构建一个单页面应用,单页面应用页面包括,头部,左侧导航,中间内容区域,如图1所示:
图1
要求:1.当左侧导航栏列表过多的时候,出现滚动条,右侧内容超出的时候右侧出现滚动条。如图2,3所示,点击左侧列表的时候,右边内容变成左侧菜单的字,如点击“左侧1”,右侧中间布局就变成“这是左侧1”,并且相应点击的li加上背景颜色,如图4所示:
注意事项:1左侧和中间布局高度默认跟浏览器窗口的高度一样,超出的时候才出现滚动条。2.点击左侧列表,通过路由来加载不同的组件。
左侧滚动条
图2
右侧滚动条
图3
图4
参考资料:https://vuejs.org/
http://router.vuejs.org/