整体页面设置
一、基本样式设置
- 为头部导航栏和尾部导航栏设置样式 并设置固定定位position:fixed
- 中间页面部分在app.vue中以占位的形式展示（router-view/单标签） 为其上下设置头尾导航栏高度的margin 以将页面内容完整的展示在头尾导航栏之间
- 在尾部导航栏中设置页面入口 并将每个页面的信息以对象数组的方式存在data中 页面信息循环插入到入口标签（有v-for就要设置:key，且:key中的值必须唯一 ）
二、点击相应的页面头尾部栏颜色的转变
- 点击尾部导航栏的页面入口时 要进入到相应的页面，并在头尾栏展示该页面的颜色，同时头部栏展示该页面的名字，这时头尾栏需要共用信息
（1） 在store下的index.js文件中设置state属性：curmenu和mutations方法：setcurmenu
（2） 为页面入口设置点击事件，点击页面入口时，将该页面的信息传给setcurmenu方法curmenu中的默认值为首页的值
setcurmenu方法是为了将被点击页面的值赋值给curmenu
（3）将头尾栏的颜色设为curmenu中的bgcolor， 头部栏的文字设置为curmenu中的name
三、回到首页功能
- 点击首页时触发点击事件，通过编程式导航，将路由值改为首页的路由值， 此时颜色并不会因为路由的转变而变为首页的颜色 需要调用setcurmenu方法，并将首页的值传给setcurmenu方法，通过setcurmenu方法将curmenu的值改为首页的值
四、通过连接进入相应页面
- 由于只有在点击页面入口和点击首页时，会触发setcurmenu方法，而将当前头尾栏的值改变，所以在搜索路由进入页面时，头尾栏的颜色和信息不会做出相应改变，此时需要用到生命周期函数，在创建结束的函数中遍历menu数组中的每一项，判断当menu数组中某一对象的路由值等于我们输入的路由值时，调用setcurmenu方法，并将此时该对象的值传给setcurmenu方法，通过setcurmenu方法将curmenu的值改为当前对象的值
