目录 配置路由router/index.jslayout/index.jsrouter/index.js
配置路由
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.pushVueRouter.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: [{ //默认 显示home组件 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是否显示