用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<
·
新建一个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
})
更多推荐
已为社区贡献8条内容
所有评论(0)