网易黄页,网站如何优化流程,教育视频网站开发,房屋室内设计用什么软件路由使用 vue-router组件库使用 vue-ydui效果图#xff1a;登录.png主界面-首页.png主界面-办事大厅.png项目结构图片.png大体流程图片.png路由代码import Vue from vueimport Router from vue-routerimport home from ../page/homeimport office from ../page/officeimport m…路由使用 vue-router组件库使用 vue-ydui效果图登录.png主界面-首页.png主界面-办事大厅.png项目结构图片.png大体流程图片.png路由代码import Vue from vueimport Router from vue-routerimport home from ../page/homeimport office from ../page/officeimport mine from ../page/mineimport mainPage from ../page/mainPageimport loginPage from ../page/loginPageVue.use(Router)export default new Router({routes: [{path: /,component: loginPage},{path: /mainPage,redirect: home,//子路由默认加载第一个界面component: mainPage,children: [{//子路由path: /home,component: home},{path: /office,component: office},{path: /mine,component: mine}]},]})登录界面loginPage登录export default {name: login-page,data(){return{loginInfo:{userNub:,password:,}}},methods:{login(){this.$router.push({ path: /mainPage});}}}主界面mainPageexport default {name: mainPage,data(){return{tabbar:[{title:首页,link:/home,active:true,icon:home-outline,},{title:办事大厅,link:/office,active:false,icon:shopcart-outline,},{title:个人中心,link:/mine,active:false,icon:ucenter,}]}},//监听路由变化切换tabwatch:{$route(to,from){for(let i0;iif(this.tabbar[i].linkto.path){this.tabbar[i].activetrue;}else{this.tabbar[i].activefalse;}}}},}office办事大厅 代码export default {name: test-a}其他略。。。有问题欢迎讨论
