php网站制作常用代码,网络设计工资一般多少,泉州网站建设+推广,深圳出国劳务公司官网文章目录 1.案例效果分析2.配置一级路由#xff08;首页#xff0c;详情#xff09;3.配置二级路由4.导航高亮效果5.首页的请求渲染6.传参#xff08;查询参数 $ 动态路由#xff09;7.详情页渲染8.组件缓存kepp-alive9.总结 1.案例效果分析 2.配置一级路由#xff08;首… 文章目录 1.案例效果分析2.配置一级路由首页详情3.配置二级路由4.导航高亮效果5.首页的请求渲染6.传参查询参数 $ 动态路由7.详情页渲染8.组件缓存kepp-alive9.总结 1.案例效果分析 2.配置一级路由首页详情 把首页配成一个路由 → 注意项关于/ import Vue from vue
import VueRouter from vue-router;import Layout from /views/Layout
import ArticleDetail from /views/ArticleDetail
Vue.use(VueRouter)const router new VueRouter({routes: [{path:/,//首页可以配成一个/component: Layout //渲染一个组件},{path:/detail,component:ArticleDetail}]
})export default router3.配置二级路由 如果要配嵌套路由可以直接写一个配置项children import Vue from vue
import VueRouter from vue-router;import Layout from /views/Layout
import Article from /views/Article
import Collect from /views/Collect
import Like from /views/Like
import User from /views/User
import ArticleDetail from /views/ArticleDetail
Vue.use(VueRouter)const router new VueRouter({// 如果访问到 /artucle这个路径时就匹配展示Article组件routes: [{path:/,//首页可以配成一个/component: Layout, //渲染一个组件//通过 children 配置项可以配置嵌套子路由//配置嵌套子路由分成两步//1.在children配置项中配置规则//2.准备二级路由出口children:[{path:/article,component:Article},{path:/collect,component:Collect},{path:/like,component:Like},{path:/user,component:User},]},{path:/detail,component:ArticleDetail}]
})export default router下面是首页二级路由出口 templatediv classh5-wrapperdiv classcontent!-- 不希望写死也要换成路由组件二级路由出口 ,就会展示匹配到的二级路由组件 --router-view/router-view/div/template4.导航高亮效果 1.将a标签换成router-link要加to属性 2.结合高亮类名实现高亮效果router-link-active模糊匹配 layout.vue
templatediv classh5-wrapperdiv classcontent!-- 不希望写死也要换成路由组件二级路由出口 ,就会展示匹配到的二级路由组件 --router-view/router-view/divnav classtabbarrouter-link to/article面经/router-linkrouter-link to/collect收藏/router-linkrouter-link to/like喜欢/router-linkrouter-link to/user我的/router-link/nav/div
/templatestylea.router-link-active{color: palevioletred;}
/style5.首页的请求渲染 首页的请求渲染其实指的是嵌套二级路由中的面经里面的文章列表就是组件Article.vue Article.vue
templatediv classarticle-pagedivv-foritem in articles:keyitem.idclassarticle-itemdiv 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
/templatescript
import axios from axios;//首页请求渲染
//1.用axios请求安装axios
//2.看对应的接口文档确认请求方式和地址和参数
// 请求地址: https://mock.boxuegu.com/mock/3083/articles
// 请求方式: get
//3.具体的确认完了在created中发请求获取数据然后存起来
//4.页面动态渲染
export default {name: ArticlePage,async created () {const res await axios.get(https://mock.boxuegu.com/mock/3083/articles)this.articles res.data.result.rows},data () {return {articles:[]//把拿到的数据存到里面}}
}
/script 6.传参查询参数 $ 动态路由 先给文章注册点击事件有两种传参方式 第一种查询参数传参 ?参数参数 通过 this.$route.query.参数名 获取更适合多个参数的情况 click$router.push(/detail?id$(item.id)) 可以在ArticlDetail.vue中获取一下 第二种动态路由传参 改造路由 /路径/参数 通过 this.$route.params.参数单个参数更优雅方便 改路由 把path:‘/detail’改成path:’/detail/:id’ 把标蓝的值改成${item.id}(通过这个来跳转) 在ArticleDetail接收不是通过query而是通过$route.params 解决bug 返回首页一片空白 可以在index.js中给首页进行重定向 点击返回按钮返回首页只要写一个back就可以了 nav classnavspan click$router.back() classbacklt;/span 面经详情/nav 7.详情页渲染 先看接口文档然后在created当中去发请求发完请求之后将数据存储到article中最后在页面中渲染。问题是当article内容没有获取完成就不用做渲染 templatediv classarticle-detail-page v-ifarticle.id!--应为加载需要事件所以加载的时候有一段时间会不显示数据只显示“浏览量”这几个字等所以可以写一个v-if告诉它什么时候才做渲染--nav classnavspan click$router.back() classbacklt;/span 面经详情/navheader classheaderh1{{ article.stem }}/h1p{{ article.createdAt }} | {{ article.views }} 浏览量 | {{ article.likeCount }} 点赞数/ppimg:srcarticle.creatorAvataralt/span{{ article.creatorName }}/span/p/headermain classbody{{ article.content }}/main/div
/templatescript
import axios from axios;// 请求地址: https://mock.boxuegu.com/mock/3083/articles/:id
// 请求方式: get
export default {name: ArticleDetailPage,data() {return {article:{}//存数据}},async created () {const id this.$route.params.idconst { data } await axios.get(https://mock.boxuegu.com/mock/3083/articles/${id})//id不能写死this.article data.resultconsole.log(this.article)},
}
/0000000000000000script8.组件缓存kepp-alive
问题从面经 点到 详情页又点返回数据重新加载了 → 希望回到原来的位置 原因路由跳转后组件被销毁了返回回来组件又被重建了所以数据重新被加载了 解决利用keep-alive将组件缓存下来 keep-alive是什么 keep-alive 是Vue的内置组件,当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。keep-alive 是一个抽象组件:它自身不会渲染成一个DOM元素,也不会出现在父组件链中。 keep-alive的有点 在组件切换过程中 把切换出去的组件保留在内存中,防止重复渲染DOM减少加载时间及性能消耗,提高用户体验性。 templatediv classh5-wrapper!-- 包裹了keep-alive 一级路由匹配的组件都会被缓存 Layout组件 Detail组件都会被缓存--keep-aliverouter-view/router-view/keep-alive/div
/template问题是直接用它包裹会缓存所有被切换的组件以后不论首页点什么都是跳转回来之前的那一页 3. keep-alive的三个属性 ①include组件名数组只有匹配的组件会被缓存 App.vue
templatediv classh5-wrapper :include[LayoutPage]keep-aliverouter-view/router-view/keep-alive/div
/templateLayout.vue
script
export default {//组件名如果没有配置name才会找文件名作为组件名name: LayoutPage,
}
/script也可以这么写如果将来要缓存的组件多的话
templatediv classh5-wrapper!-- 包裹了keep-alive 一级路由匹配的组件都会被缓存 Layout组件 Detail组件都会被缓存需求:只希望Layout被缓存include配置:include组件名数组--keep-alive :include[keepArr]router-view/router-view/keep-alive/div
/templatescript
export default {name: h5-wrapper,//如果缓存的组件比较多可以提供一个数据data () {return {//缓存组件名的数组keepArr:[LayoutPage]}}
}
/script②exclude组件名数组任何匹配的组件都不会被缓存 ③max最多可以缓存多少组件实例 被缓存的组件会多两个生命周期 actived和deactived actived:激活时组件被看到时触发 deactive:失活时离开页面组件看不见时触发 作用组件一旦被缓存就不涉及到组件的创建和销毁了那这个时候组件的什么beforecreatcreatedbeforemountmounted等对应的钩子就不会被触发了 9.总结
