VUE 选项卡跳转

刚接触vue不久，就遇上了tab（之前只用过js），在查阅网上资料并运行代码后，发现用router跳转和直接components选择切换是最普遍的方法。以下代码是在原本大佬的基础上修改的，就不作为原创啦，但原文网址找不到啦，现在作为一个简单的笔记记录一下（毕竟真的很简单且常用）。

一、通过router跳转

 

1.app.vue 总的router-view设置

<template>
  <div id="app">
    <router-view></router-view>
    <tabbar v-if="$route.meta.showTab"></tabbar>
  </div>
</template>

<script>
import Tabbar from "./components/Tabbar";
export default {
  name: "app",
  created: function () {
    this.$router.push("/");
  },
  components: {
    Tabbar,
  },
};
</script>

1.main.js中引用 

import Vue from "vue";
import App from "./App.vue";
import router from "./router/index.js";
import VueRouter from "vue-router";
import MintUI from "mint-ui";
import "mint-ui/lib/style.css";
import axios from "axios";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
import Vant from "vant";
import "vant/lib/index.css";
import VueResource from "vue-resource";//上下包含了其他组件库，按需引入

Vue.use(VueResource);
Vue.use(Vant);
Vue.use(ElementUI);
Vue.prototype.$axios = axios;
Vue.prototype.HOST = "/api";
Vue.use(MintUI);
Vue.use(VueRouter);
Vue.config.productionTip = false;

new Vue({
  el: "#app",
  router,
  render: (h) => h(App),
}).$mount("#app");

3. components 组件Tabbar.vue

跳转前后图片未作更改

<template>
  <div class="tab">
    <div
      class="tab_item"
      v-for="(item, index) in tabBarImg"
      :key="index"
      @click="switchToTab(item.path)"
    >
      <img :src="$route.path === item.path ? item.icon : item.normal" alt="" />
      <span :class="$route.path === item.path ? 'active' : ''">{{
        item.title
      }}</span>
    </div>
  </div>
</template>
<script type="text/javascript">
export default {
  name: "TabbarApp",
  data() {
    return {
      tabBarImg: [
        {
          path: "/HomeTab",
          normal: require("./../assets/bg.png"),
          icon: require("./../assets/bg.png"),
          title: "首页",
        },
        {
          path: "/ManageTab",
          normal: require("./../assets/bg.png"),
          icon: require("./../assets/bg.png"),
          title: "管理",
        },
        {
          path: "/NewsTab",
          normal: require("./../assets/bg.png"),
          icon: require("./../assets/bg.png"),
          title: "控制台",
        },
        {
          path: "/MyTab",
          normal: require("./../assets/bg.png"),
          icon: require("./../assets/bg.png"),
          title: "我的",
        },
      ],
    };
  },
  methods: {
    switchToTab(path) {
      console.log(path);
      this.$router.replace(path);
    },
  },
};
</script>
<style type="text/css">
* {
  margin: 0;
  padding: 0;
}
.tab {
  width: 100%;
  height: 7vh;
  display: flex;
  border-top: 1px solid #e6a23c;
  position: fixed;
  bottom: 0;
  background: #fff;
  z-index: 999;
}
.tab_item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: column;
}
.tab_item img {
  width: 30px;
  height: 30px;
}
.active {
  color: rgb(220, 128, 41);
}
</style>

4. router文件夹中新建index.js

import Vue from "vue";
import Router from "vue-router";
import HomeTab from "../views/HomeTab";
import MyTab from "../views/MyTab";
import ManageTab from "../views/ManageTab";
import NewsTab from "../views/NewsTab";
import detail from "../views/detail";

Vue.use(Router);
const originalPush = Router.prototype.push;
Router.prototype.push = function push(location) {
  return originalPush.call(this, location).catch((err) => err);
};

export default new Router({
  mode: "history",
  routes: [
    {
      path: "/HomeTab",
      component: HomeTab,
      meta: {
        showTab: true,
      },
    },
    {
      path: "/ManageTab",
      component: ManageTab,
      meta: {
        showTab: true,
      },
    },
    {
      path: "/NewsTab",
      component: NewsTab,
      meta: {
        showTab: true,
      },
    },
    {
      path: "/MyTab",
      component: MyTab,
      meta: {
        showTab: true,
      },
    },
    {
      path: "/",
      redirect: "/HomeTab", //默认打开Home页面
    },
    {
      path: "/detail",
      component: detail,
    },
  ],
});

二、纯用components

<AppTab></AppTab> //在需要的地方引入，别忘了js中也要

AppTab内容如下

<template>
  <div>
    <div class="tab-control">
      <div
        v-for="(item, index) in tabList"
        :key="index"
        :class="{ active: currentClass == index }"
        @click="toggleTab(item.tab_con, index)"
      >
        <span>{{ item.title }}</span>
      </div>
    </div>
    
    <div class="tab_con">
      <keep-alive>
        <firstTab :is="currentTab"></firstTab>
      </keep-alive>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import firstTab from "./firstTab";
import secondTab from "./secondTab";
import thirdTab from "./thirdTab";
import fourTab from "./fourTab";
export default {
  name: "AppTab",
  mounted() {},
  components: {
    firstTab,
    secondTab,
    thirdTab,
    fourTab,
  },
  methods: {
    toggleTab(tab_con, currentClass) {
      this.currentTab = tab_con; // 选中tab内容块展示
      this.currentClass = currentClass; // 选中tab样式
    },
  },
  props: {},
  data() {
    return {
      searchValue: "",
      currentTab: "firstTab",
      currentClass: 0,
      tabList: [
        {
          title: "审核中", // tab文字
          tab_con: "firstTab", // tab对应内容块
        },
        {
          title: "执行中",
          tab_con: "secondTab",
        },
        {
          title: "已终止",
          tab_con: "thirdTab",
        },
        {
          title: "已过期",
          tab_con: "fourTab",
        },
      ],
    };
  },
};
</script>

<style>
.tab-control {
  height: 32px;
  display: flex;
  background-color: #fdfdff;
  color: #292828;
  position: relative;
  margin-top: 3px;
  top: -75px;
}
.tab-control div {
  font-size: 13px;
  flex: 1;
  padding-top: 7px;
  align-items: center;
  text-align: center;
}
.active {
  background-color: #dbf2ff;
}
.tab_con {
  flex: 1;
  padding: 10px;
  display: block;
  background-color: #f2f2f2;
  top: -85px;
  position: relative;
}
</style>