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.$