MintUI实现手机端首页头部导航

---

MintUI实现手机端首页头部导航

一、效果图

二、代码

1.vue

代码如下：有点击事件可跳转

<mt-header title="光会再次降临">
      <div slot="right">
        <router-link class="rl" to="/login">登录</router-link>&nbsp;
        <router-link class="rl" to="/register">注册</router-link>
      </div>
 </mt-header>
    <!--导航-->
 <mt-navbar v-model="navactive">
      <mt-tab-item id="1">ui</mt-tab-item>
      <mt-tab-item id="2">交互</mt-tab-item>
      <mt-tab-item id="3">电商</mt-tab-item>
      <mt-tab-item id="4">网页</mt-tab-item>
 </mt-navbar>

2.index.js

代码如下：

import Home from '../views/Home.vue'
const routes = [
  {
    path: '/home',
    name: 'Home',
    component: Home
  },
]

---

总结

完整首页一小段，缺失部分在后面