用Vue前端路由实现tab栏切换

新建一个app.vue文件，写入下方代码

<template>
	<div class="container">
		<div class="tab">
			<router-link to="/a" name='a'>管理1</router-link><br>
			<router-link to="/b" name='b'>管理2</router-link><br>
			<router-link to="/c" name='c'>管理3</router-link><br>
			<router-link to="/d" name='d'>管理4</router-link><br>
		</div>
		<div class="content">
			<router-view></router-view>
		</div>
	</div>
</template>

<script>
	
</script>

<style scoped="scoped">
	.container{
		width: 80%;
		height: 600px;
		border: 1px solid red;
		margin: auto;
		display: flex;
	}
	.tab{
		flex: 1;
		border: 1px solid red;
		display: flex;
		flex-direction: column;
		text-align: center;
	}
	.tab a{
		color: black;
		text-decoration: none;
	}
	.tab a:hover{
		color: #FF0000;
	}
	.content{
		flex: 5;
		border: 1px solid red;
	}
</style>

router.js：

import Vue from 'vue/dist/vue.esm.js'
import Router from 'vue-router/dist/vue-router.js'
import A from '../components/a.vue'
import B from '../components/b.vue'
import C from '../components/c.vue'
import D from '../components/d.vue'
Vue.use(Router);//将router挂载到Vue对象当中
//创建路由对象
export default new Router({
	routes: [
		{
			path: '/',
			redirect:'/a'
		},
		{
			path: '/a',
			name:'a',
			component: A
		},
		{
			path: '/b',
			name:'b',
			component: B
		},
		{
			path: '/c',
			name:'c',
			component: C
		},
		{
			path: '/d',
			name:'d',
			component: D
		},
	]
})

index.js：

import Vue from 'vue/dist/vue.esm.js'
import App from './components/app.vue'
import router from './router/router.js'
const vm = new Vue({
 el:'#app',
 //render:h=>h(App),
 template: '<App/>',
 components: { App },
 router:router
})