目录
组件缓存
当首页跳转详情页应该做缓存
vue2
<keep-alive include="Home">
<router-view></router-view>
</keep-alive>
vue3
<!-- Component 为渲染的组件 is控制是否-->
<router-view v-slot="{ Component }">
<keep-alive include="Home">
<component :is="Component" />
</keep-alive>
</router-view>
网络请求
import axios from './http'
//获取新闻详情
export const NewsInfo = id => {
return axios.get('/api/news_info', {
params: {
id
}
})
}
//获取新闻评论信息
export const StoryExtra = id => {
return axios.get('/api/story_extra', {
params: {
id
}
})
}
详情页
- 样式有data标识不需要/deep/ 没有为组件库样式需要加
- v-text 不识别标签,v-html可以识别标签
- route 路由实例对象控制路由跳转 router.back()返回一级
- route路由信息对象,获取路径参数 route.params.id获取路径参数
- 销毁前 移除link标签避免样式冲突
- 页面更新完毕后可以获取到dom 追加图片(类似于-$nextTick)
js创建元素&&添加标签
- document.createElement(‘link’)
- document.head.append(link)创建dom元素
- document.head.removeChild(link) 移除dom元素
- let img = document.querySelector(‘.img-place-holder’)
- img.innerHTML += `<img src=”${state.NewsInfo.image}” alt=””>` 添加元素
link 标签
-
HTML外部资源链接元素
(
<link>
) 规定了当前文档与外部资源的关系。该元素最常用于链接
样式表
,此外也可以被用来创建站点图标(比如PC端的“favicon”图标和移动设备上用以显示在主屏幕的图标) 。 -
href:此属性指定被链接资源的
URL
。 URL 可以是绝对的,也可以是相对的。 - rel 必需。定义当前文档与被链接文档之间的关系。 stylesheet样式表
<template>
<van-skeleton title :row="5" v-if="NewsInfo === null" />
<div class="content" v-html="NewsInfo.body" v-else> </div>
<div class="nav-box">
<van-icon name="arrow-left" @click="handle" />
<van-icon name="comment-o" :badge="comments" />
<van-icon name="good-job-o" :badge="popularity" />
<van-icon name="star-o" color="#1989fa" />
<van-icon name="share-o" color="#ccc" />
</div>
</template>
<script>
import { useRouter, useRoute } from 'vue-router'
import { reactive, toRefs, onBeforeMount, onBeforeUnmount, onUpdated } from 'vue'
import { NewsInfo, StoryExtra } from '../api/index'
export default {
name: "Detail",
setup() {
let state = reactive({
comments: 0,//评论总数
popularity: 0,//点赞数
NewsInfo: null
})
//路由实例对象控制路由跳转
const router = useRouter()
//路由信息对象,获取路径参数
const route = useRoute()
//点击跳转返回上一级
const handle = (() => {
router.back()
})
//获取数据
onBeforeMount(async () => {
let id = route.params.id
let result = await NewsInfo(id)
state.NewsInfo = result
let { comments, popularity } = await StoryExtra(id)
state.comments = comments
state.popularity = popularity
//动态创建css
let link = document.createElement('link')
link.id = 'link'
link.rel = 'stylesheet'
link.href = state.NewsInfo.css[0]
document.head.append(link)
})
//数据更新后,可以获取到dom 追加图片
onUpdated(() => {
let img = document.querySelector('.img-place-holder')
if (img && img.innerHTML.trim() == '') {
img.innerHTML += `<img src="${state.NewsInfo.image}" alt="">`
}
})
//移除link标签避免样式冲突
onBeforeUnmount(() => {
let link = document.getElementById('link')
if (!link) return
document.head.removeChild(link)
})
return {
...toRefs(state),
handle
}
},
};
</script>
<style lang="less" scoped>
.content {
background: #fff;
padding-bottom: 50px;
margin: 0;
/deep/.img-place-holder {
overflow: hidden;
height: 375px;
img {
width: 100%;
min-height: 100%;
margin: 0;
}
}
}
.nav-box {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
box-sizing: border-box;
display: flex;
justify-content: space-between;
align-items: center;
background: #f4f4f4;
height: 50px;
padding: 0 15px;
.van-icon:nth-child(1) {
position: relative;
&::after {
position: absolute;
content: '';
width: 1px;
top: -10%;
right: -15px;
height: 120%;
background: #d5d5d5;
}
}
/deep/.van-badge {
background-color: transparent;
border: none;
color: #000;
right: -5px;
}
}
.van-skeleton {
padding: 30px 15px;
}
</style>
$nextTick&& scoped
nextTick 下一轮
- nextTick在下一次daom节点更新结束后执行其指定的回调
- 应用场景“当改变数据后,要基于更新后的新Dom进行某些操作”
scoped样式私有化,只在当前组件生效 会在标签中加data-v-40f4caea 属性值
版权声明:本文为qq_63358859原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。