配置路由
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/26f67639b458237f9dc65f07b3ed4014.png#pic_center)
router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [{
path: "/login",
name: "Login",
component: () => import("../views/login/Login.vue")
}, {
path: "/",
name: "Layout",
component: () => import("../views/layout/index.vue"),
children: [{
//默认 显示home组件
path: "",
name: "Home",
component: () => import("../views/home/Home.vue")
}, {
path: "/home",
name: "Home",
component: () => import("../views/home/Home.vue")
},
{
path: "/qa",
name: "Qa",
component: () => import("../views/qa/Qa.vue")
}, {
path: "/video",
name: "Video",
component: () => import("../views/video/Video.vue")
}, {
path: "/me",
name: "Me",
component: () => import("../views/me/me.vue")
}
]
}]
const router = new VueRouter({
routes
})
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err)
}
export default router
layout/index.js
- 在view 下创建 layout 文件 这个是用于布局的文件
- 然后引入 设置路由的显示 和 tabber
- 刷新后,还想高亮之前的tab中的item
<template>
<div class="layout-container">
<!-- 子路由出口 -->
<router-view />
<!-- 底部导航栏 -->
<van-tabbar v-model="active">
<van-tabbar-item v-for="item in tabbar" @click="goto(item.path)" :key="item.path" :icon="item.icon">{{ item.text }}</van-tabbar-item>
</van-tabbar>
</div>
</template>
<script>
import Vue from 'vue';
import {
Tabbar,
TabbarItem
} from 'vant';
Vue.use(Tabbar);
Vue.use(TabbarItem);
export default {
name: 'Layout',
data() {
return {
active: 0,
tabbar:[
{
path:"/home",
text:"首页",
icon:"home-o"
},
{
path:"/qa",
text:"问答",
icon:"search"
},
{
path:"/video",
text:"视频",
icon:"volume-o"
}, {
path:"/me",
text:"我的",
icon:"friends-o"
}
]
};
},
created(){
this.tabbar.map((item,idx) =>{
if(item.path === this.$route.path){
this.active = idx;
}
})
},
methods: {
goto(path){
this.$router.push(path)
}
},
components: {},
}
</script>
<style lang="scss" scoped>
</style>
router/index.js
{
path: '/',
redirect: '/XXX',
},
{
path: "/",
name: "Layout",
component: () => import("../views/layout/index.vue"),
children: [{
path: "",
name: "Home",
meta:{
keepalive:true
},
component: () => import("../views/home/Home.vue")
}, {
path: "/home",
name: "Home",
component: () => import("../views/home/Home.vue")
},
{
path: "/qa",
name: "Qa",
component: () => import("../views/qa/Qa.vue")
}, {
path: "/video",
name: "Video",
component: () => import("../views/video/Video.vue")
}, {
path: "/me",
name: "Me",
component: () => import("../views/me/me.vue")
}
]
},
- 骚操作
控制底下的tabbar是否显示
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/4adf64729f5bc133b556365516ad454b.png#pic_center)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/7dfaf0cebbc7548841d61a2b3bd90c2d.png#pic_center)