2.导航

有导航组件,

这里采用iView的Menu组件,使用v-for循环输出API获取数据,使用router-link设定超链接

Menu组件介绍

<Menu mode="horizontal" :theme="theme1" active-name="1">

        <MenuItem name="1">

            <div class="main">

                <Icon type="md-book" />

                <router-link to="/">{{index}}</router-link>

            </div>

        </MenuItem>

        <MenuItem v-for=" item in menu" :name="item.name" :key="item.name">

            <router-link to="item.src">{{item.name}}</router-link>

        </MenuItem>

        <MenuItem name="2">

            <Dropdown v-if="userBtn">

                <a href="javascript:void(0)">

                    用户:{{username}}

                    <Icon type="arrow-down"></Icon>

                </a>

                <Dropdown-menu slot="list">

                    <Dropdown-item>

                        <div @click="goUrl('/userInfo/'+username)">个人信息</div>

                    </Dropdown-item>

                    <Dropdown-item>

                        <div @click="goUrl('/mail/')">我的私信</div>

                    </Dropdown-item>

                    <Dropdown-item>

                        <div @click="goUrl('/collection/')">我的收藏</div>

                    </Dropdown-item>

                    <Dropdown-item>

                        <div @click="exit">退出</div>

                    </Dropdown-item>

                </Dropdown-menu>

            </Dropdown>

            <router-link v-if="!userBtn" :to="{path:'/login'}">登录</router-link>

        </MenuItem>

    </Menu>

设置theme为light,dark,primary.

active-name:可以选中指定的菜单

下滑菜单:属于Drop-item的Dropdown <Dropdown-menu slot=list> Dropdown-item 

使用v-if控制出现登录菜单还是个人信息菜单