本文中出现的代码可复制直接使用
首页要在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>