深圳网站搭建,怎么做别人网站销售的东西公证,专业的定制型网站建设,关于手机的网站有哪些内容一、面经基础版-案例效果分析
1.面经效果演示 2.功能分析
通过演示效果发现#xff0c;主要的功能页面有两个#xff0c;一个是列表页#xff0c;一个是详情页#xff0c;并且在列表页点击时可以跳转到详情页底部导航可以来回切换#xff0c;并且切换时#xff0c;只有…一、面经基础版-案例效果分析
1.面经效果演示 2.功能分析
通过演示效果发现主要的功能页面有两个一个是列表页一个是详情页并且在列表页点击时可以跳转到详情页底部导航可以来回切换并且切换时只有上面的主题内容在动态渲染
3.实现思路分析配置路由功能实现
1.配置路由
首页和面经详情页两个一级路由首页内嵌套4个可切换的页面嵌套二级路由
2.实现功能
首页请求渲染跳转传参 到 详情页详情页动态渲染组件缓存性能优化 App是第一个页面首页和面经详情是直接渲染到App页面上的所以把这两个页面定为一级路由渲染的页面而首页中有四个导航按钮是渲染到首页上的所以定为二级路由。
二、面经基础版-一级路由配置
1.把文档中准备的素材拷贝到项目中
2.针对router/index.js文件 进行一级路由配置
...
import Layout from /views/Layout.vue
import ArticleDetail from /views/ArticleDetail.vue
...const router new VueRouter({routes: [{path: /,component: Layout},{path: /detail,component: ArticleDetail}]
})三、面经基础版-二级路由配置
二级路由也叫嵌套路由当然也可以嵌套三级、四级…
1.使用场景
当在页面中点击链接跳转只是部分内容切换时我们可以使用嵌套路由
2.语法
在一级路由下配置children属性即可配置二级路由的出口
1.在一级路由下配置children属性
注意:一级的路由path 需要加 / 二级路由的path不需要加 /
const router new VueRouter({routes: [{path: /,component: Layout,children:[//children中的配置项 跟一级路由中的配置项一模一样 {path:xxxx,component:xxxx.vue},{path:xxxx,component:xxxx.vue},]}]
})技巧二级路由应该配置到哪个一级路由下呢
这些二级路由对应的组件渲染到哪个一级路由下children就配置到哪个路由下边
2.配置二级路由的出口
注意 配置了嵌套路由一定配置对应的路由出口否则不会渲染出对应的组件
Layout.vue
templatediv classh5-wrapperdiv classcontentrouter-view/router-view/div..../div
/template3.代码实现
router/index.js
...
import Article from /views/Article.vue
import Collect from /views/Collect.vue
import Like from /views/Like.vue
import User from /views/User.vue
...const router new VueRouter({routes: [{path: /,component: Layout,redirect: /article,children:[{path:/article,component:Article},{path:/collect,component:Collect},{path:/like,component:Like},{path:/user,component:User}]},....]
})
Layout.vue
templatediv classh5-wrapperdiv classcontent!-- 内容部分 --router-view/router-view/divnav classtabbara href#/article面经/aa href#/collect收藏/aa href#/like喜欢/aa href#/user我的/a/nav/div
/template四、面经基础版-二级导航高亮
1.实现思路
将a标签替换成 组件配置to属性不用加 #结合高亮类名实现高亮效果 (推荐模糊匹配router-link-active)
2.代码实现
Layout.vue
....nav classtabbarrouter-link to/article面经/router-linkrouter-link to/collect收藏/router-linkrouter-link to/like喜欢/router-linkrouter-link to/user我的/router-link/navstylea.router-link-active {color: orange;}
/style五、面经基础版-首页请求渲染
1.步骤分析
1.安装axios
2.看接口文档确认请求方式请求地址请求参数
3.created中发送请求获取数据存储到data中
4.页面动态渲染
2.代码实现
1.安装axios
yarn add axios 或npm i axios
2.接口文档
请求地址: https://mock.boxuegu.com/mock/3083/articles
请求方式: get3.created中发送请求获取数据存储到data中 data() {return {articelList: [],}},async created() {// 解构赋值const { data: { result: { rows } }} await axios.get(https://mock.boxuegu.com/mock/3083/articles)this.articelList rows},4.页面动态渲染
templatediv classarticle-pagediv classarticle-item v-foritem in articelList :keyitem.iddiv classheadimg :srcitem.creatorAvatar alt /div classconp classtitle{{ item.stem }}/pp classother{{ item.creatorName }} | {{ item.createdAt }}/p/div/divdiv classbody{{item.content}}/divdiv classfoot点赞 {{item.likeCount}} | 浏览 {{item.views}}/div/div/div
/template六、面经基础版-查询参数传参
1.说明
跳转详情页需要把当前点击的文章id传给详情页获取数据
查询参数传参 this.$router.push(‘/detail?参数1参数值参数2参数值’)动态路由传参 先改造路由 在传参 this.$router.push(‘/detail/参数值’)
2.查询参数传参实现
Article.vue
templatediv classarticle-pagediv classarticle-item v-foritem in articelList :keyitem.id click$router.push(/detail?id${item.id}).../div/div
/templateArticleDetail.vue created(){console.log(this.$route.query.id)}七、面经基础版-动态路由传参
1.实现步骤
改造路由动态传参在详情页获取参数
2.代码实现
改造路由
router/index.js
...{path: /detail/:id,component: ArticleDetail}Article.vue
div classarticle-item v-foritem in articelList :keyitem.id click$router.push(/detail/${item.id})....
/divArticleDetail.vue created(){console.log(this.$route.params.id)}3.额外优化功能点-点击回退跳转到上一页
ArticleDetail.vue
templatediv classarticle-detail-pagenav classnavspan classback click$router.back()lt;/span 面经详情/nav..../div
/template八、面经基础版-详情页渲染
1.实现步骤分析
导入axios查看接口文档在created中发送请求页面动态渲染
2.代码实现
接口文档 请求地址: https://mock.boxuegu.com/mock/3083/articles/:id请求方式: get在created中发送请求 data() {return {articleDetail:{}}},async created() {const id this.$route.params.idconst {data:{result}} await axios.get(https://mock.boxuegu.com/mock/3083/articles/${id})this.articleDetail result},页面动态渲染
templatediv classarticle-detail-pagenav classnavspan classback click$router.back()lt;/span 面经详情/navheader classheaderh1{{articleDetail.stem}}/h1p{{articleDetail.createAt}} | {{articleDetail.views}} 浏览量 | {{articleDetail.likeCount}} 点赞数/ppimg:srcarticleDetail.creatorAvataralt/span{{articleDetail.creatorName}}/span/p/headermain classbody{{articleDetail.content}}/main/div
/template
九、面经基础版-缓存组件
1.问题
从面经列表 点到 详情页又点返回数据重新加载了 → 希望回到原来的位置 2.原因
当路由被跳转后原来所看到的组件就被销毁了会执行组件内的beforeDestroy和destroyed生命周期钩子重新返回后组件又被重新创建了会执行组件内的beforeCreate,created,beforeMount,Mounted生命周期钩子所以数据被加载了
3.解决方案
利用keep-alive把原来的组件给缓存下来
4.什么是keep-alive
keep-alive 是 Vue 的内置组件当它包裹动态组件时会缓存不活动的组件实例而不是销毁它们。
keep-alive 是一个抽象组件它自身不会渲染成一个 DOM 元素也不会出现在父组件中。
优点
在组件切换过程中把切换出去的组件保留在内存中防止重复渲染DOM
减少加载时间及性能消耗提高用户体验性。
App.vue
templatediv classh5-wrapperkeep-aliverouter-view/router-view/keep-alive/div
/template问题
缓存了所有被切换的组件
5.keep-alive的三个属性
① include 组件名数组只有匹配的组件会被缓存
② exclude 组件名数组任何匹配的组件都不会被缓存
③ max 最多可以缓存多少组件实例
App.vue
templatediv classh5-wrapperkeep-alive :include[LayoutPage]router-view/router-view/keep-alive/div
/template6.额外的两个生命周期钩子
keep-alive的使用会触发两个生命周期函数
activated 当组件被激活使用的时候触发 → 进入这个页面的时候触发
deactivated 当组件不被使用的时候触发 → 离开这个页面的时候触发
组件缓存后就不会执行组件的created, mounted, destroyed 等钩子了
所以其提供了actived 和deactived钩子帮我们实现业务需求。
7.总结
1.keep-alive是什么
2.keep-alive的优点
3.keep-alive的三个属性 (了解)
4.keep-alive的使用会触发两个生命周期函数(了解)
