tab切换路由【vue小技巧】

本文中出现的代码可复制直接使用

首页要在component文件夹里创建tab1.vue页面 

<template>

  <div class="tabs">

    <router-link class="tab-item" tag="div" to="/Page1">page1</router-link>

    <router-link class="tab-item" tag="div" to="/Page2">page2</router-link>

    <router-link class="tab-item" tag="div" to="/Page3">page3</router-link>

  </div>

</template>

<script>

export default {};

</script>

<style lang="less">

.tabs {

  display: flex;

  height: 60px;

  width: 100%;

  background-color: #e5e5e5;

  cursor: pointer;

  div {

    margin-right: 20px;

  }

}

</style>

在view文件中创建tabs1文件创建三个vue页面，分别是 page1.vue、page2.vue、page3.vue

 //内容可随便

<template>

  <div class="">

    page1

    这是通过路由切换的tab栏

  </div>

</template>

<script>

export default {

  name: '',

  components: {

   

  }

}

</script>

 在router文件中引入这三个路由

import Vue from 'vue'

import VueRouter from 'vue-router'

import Page1 from '../views/Tabs1/Page1.vue'

// import Page1 from '../views/Tab2/Page.vue'

Vue.use(VueRouter)

const routes = [

  {

    path: '/Page1',

    name: 'Page1',

    component: Page1

  },

  {

    path:'/page2',

    component: () => import('@/views/Tabs1/Page2')

  },

  {

    path: '/page3',

    component: () => import('@/views/Tabs1/Page3')

  }

]

const router = new VueRouter({

  mode: 'history',

  base: process.env.BASE_URL,

  routes

})

export default router

 

最后在app.vue中引入tab1文件

<template>

  <div>

    <Tab></Tab>

    <router-view></router-view>

  </div>

</template>

<script>

  // tab路由切换

  import Tab from './components/tab1.vue'

  // import Tab from './components/tab2.vue'

  export default {

    data() {

      return {

      }

    },

    components:{

      Tab

    }

  }

</script>

<style lang="less">

</style>