Vue多文件学习项目综合案例——面经基础版，黑马vue教程

文章目录一、项目截图二、主要知识点三、main.js四、App.vue五、viewsArticle.vueArticleDetail.vueCollect.vueLayout.vueLike.vueUser.vuerouterindex.js一、项目截图二、主要知识点路由跳转路由传参缓存组件keep-alive三、main.jsimportVuefromvueimportAppfrom./App.vueimportrouterfrom./routerVue.config.productionTipfalsenewVue({render:hh(App),router}).$mount(#app)四、App.vuetemplatedivclassh5-wrapperkeep-alive:include[LayoutPage]router-view/router-view/keep-alive/div/templatescriptexportdefault{name:h5-wrapper,}/scriptstylebody{margin:0;padding:0;}/stylestylelanglessscoped.h5-wrapper{.content{margin-bottom:51px;}.tabbar{position:fixed;left:0;bottom:0;width:100%;height:50px;line-height:50px;text-align:center;display:flex;background:#fff;border-top:1px solid #e4e4e4;a{flex:1;text-decoration:none;font-size:14px;color:#333;-webkit-tap-highlight-color:transparent;.router-link-active{color:#fa0;}}}}/style五、viewsArticle.vuetemplatedivclassarticle-pagedivv-for(item,index) in articls:keyindexclick$router.push(/detail?id${item.id})classarticle-itemdivclassheadimg:srcitem.creatorAvataralt/divclassconpclasstitle{{item.stem}}/ppclassother{{item.creatorName}} | {{item.createdAt}}/p/div/divdivclassbody{{item.content}}/divdivclassfoot点赞 {{item.likeCount}} | 浏览 {{item.views}}/div/div/div/templatescript// 请求地址: https://mock.boxuegu.com/mock/3083/articles// 请求方式: getimportaxiosfromaxios;exportdefault{name:ArticlePage,data(){return{articls:[]}},asynccreated(){constresawaitaxios.get(https://mock.boxuegu.com/mock/3083/articles)this.articlsres.data.result.rows}}/scriptstylelanglessscoped.article-page{background:#f5f5f5;}.article-item{margin-bottom:10px;background:#fff;padding:10px 15px;.head{display:flex;img{width:40px;height:40px;border-radius:50%;overflow:hidden;}.con{flex:1;overflow:hidden;padding-left:15px;p{margin:0;line-height:1.5;.title{text-overflow:ellipsis;overflow:hidden;width:100%;white-space:nowrap;}.other{font-size:10px;color:#999;}}}}.body{font-size:14px;color:#666;line-height:1.6;margin-top:10px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}.foot{font-size:12px;color:#999;margin-top:10px;}}/styleArticleDetail.vuetemplatedivclassarticle-detail-pagev-showarticlDetail.idnavclassnavspanclick$router.back()classbacklt;/span面经详情/navheaderclassheaderh1{{articlDetail.stem}}/h1p{{articlDetail.createdAt}} | {{articlDetail.views}} 浏览量 | {{articlDetail.likeCount}} 点赞数/ppimg:srcarticlDetail.creatorAvataralt/span{{articlDetail.creatorName}}/span/p/headermainclassbody{{articlDetail.content}}/main/div/templatescript// 请求地址: https://mock.boxuegu.com/mock/3083/articles/{id}// 请求方式: getimportaxiosfromaxios;exportdefault{name:ArticleDetailPage,data(){return{articlDetail:{}}},asynccreated(){constresawaitaxios.get(https://mock.boxuegu.com/mock/3083/articles/this.$route.query.id)// this.articlsres.data.result.rowsthis.articlDetailres.data.result console.log(this.articlDetail)}}/scriptstylelanglessscoped.article-detail-page{.nav{height:44px;border-bottom:1px solid #e4e4e4;line-height:44px;text-align:center;.back{font-size:18px;color:#666;position:absolute;left:10px;top:0;transform:scale(1,1.5);}}.header{padding:0 15px;p{color:#999;font-size:12px;display:flex;align-items:center;}img{width:40px;height:40px;border-radius:50%;overflow:hidden;}}.body{padding:0 15px;}}/styleCollect.vuetemplatedivCollect/div/templatescriptexportdefault{name:CollectPage}/scriptLayout.vuetemplatedivclassh5-wrapperdivclasscontentrouter-view/router-view/divnavclasstabbarrouter-linkto/article面经/router-linkrouter-linkto/collect收藏/router-linkrouter-linkto/like喜欢/router-linkrouter-linkto/user我的/router-link/nav/div/templatescriptexportdefault{name:LayoutPage,}/scriptstylebody{margin:0;padding:0;}/stylestylelanglessscoped.h5-wrapper{.content{margin-bottom:51px;}.tabbar{position:fixed;left:0;bottom:0;width:100%;height:50px;line-height:50px;text-align:center;display:flex;background:#fff;border-top:1px solid #e4e4e4;a{flex:1;text-decoration:none;font-size:14px;color:#333;-webkit-tap-highlight-color:transparent;}a.router-link-active{//color:orange;background:orange;}}}/styleLike.vuetemplatedivLike/div/templatescriptexportdefault{name:LikePage}/scriptUser.vuetemplatedivUser/div/templatescriptexportdefault{name:UserPage}/scriptrouterindex.jsimportVuefromvueimportVueRouterfromvue-router;importLayoutfrom/views/Layout.vue;importArticleDetailfrom/views/ArticleDetail.vue;importArticlefrom/views/Article.vue;importCollectfrom/views/Collect.vue;importLikefrom/views/Like.vue;importUserfrom/views/User.vue;Vue.use(VueRouter)constrouternewVueRouter({routes:[{path:/,component:Layout,redirect:/article,children:[{path:/article,component:Article},{path:/collect,component:Collect},{path:/like,component:Like},{path:/user,component:User}]},{path:/detail,component:ArticleDetail}]})exportdefaultrouter