文章详情 (二) -内容渲染-阅读记忆-@scroll=remember($event) 记住阅读位置 & v-html渲染文章详情内容 & toString() 方法可把一个逻辑值转换为字符串

文章详情-内容渲染-@scroll=“remember($event)” 记住阅读位置 & v-html渲染文章详情内容 & toString() 方法可把一个逻辑值转换为字符串

src/api/article.js api代码

export const getArticlepetail=(articleId)=>{
return request('/app/v1_e/articles/'+articlerd,'get')

src/views/home/article.vue

 // @scroll="remember($event)" 记住阅读位置
<div class='container' @scroll="remember($event)" ref="container">
    <van-nav-bar fixed title="文章详情" left-arrow @click-left="$router.back()" />
    <div class="detail" v-if="article">
      <h3 class="title">{{article.title}}</h3>
      <div class="author">
        <van-image round width="1rem" height="1rem" fit="fill" :src="article.aut_photo" />
        <div class="text">
          <p class="name">{{article.aut_name}}</p>
            // 相对时间
          <p class="time">{{article.pubdate|relTime}}</p>
        </div>
        <van-button round size="small" type="info">
           {{article.is_followed?'已关注':'+ 关注'}}
        </van-button>
      </div>
        // v-html渲染文章详情内容
      <div class="content" v-html="article.content"></div>
      <div class="zan">
          // 组件页面切换
        <van-button round size="small" :class="{active:article.attitude===1}" plain icon="like-o">点赞</van-button>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <van-button round size="small" :class="{active:article.attitude===0}" plain icon="delete">不喜欢</van-button>
      </div>
    </div>
  </div>

src/views/home/article.vue中script里

import { getArticleDetail } from '@/api/article'
export default {
   //声明是为了标志更好找
  name: 'home-article',
  data () {
    return {
      article: {},
        //记住阅读位置
      scrollTop: 0
    }
  },
    //只会执行一次，将来再次进入组件，激活组件activated
//  created () {
//    this.getArticleDetail()
//  },
  activated () {
    // 没有文章数据  阻止程序运行
    if (!this.article) return false
     //再次激活，滚动到之前的位置
    //如果再次阅读上一次阅读的文章，才去做约定位置滚动 
      // toString() 方法可把一个逻辑值转换为字符串，并返回结果
    //if (this.$route.params.id === this.article.art_id.toString()) {
     if(this.article.art_id && this.articleId===this.article.art_id.tostring()){
      // 浏览文章与上次一致  阅读的同一篇文章
      this.$refs['container'].scrollTop = this.scrollTop
    } else {
      // 浏览文章与上次不一致 
        //清除之前的文章信息
      this.article = {}
        // 滚动条清零  回到顶部
      this.scrollTop = 0
        //重新获取文章数据
      this.getArticleDetail()
    }
  },
  methods: {
      //记住阅读位置
    remember (e) {
      this.scrollTop = e.target.scrollTop
    },
      //获取文章详情
    async getArticleDetail () {
        //直接获取地址栏ID  文章详情组件已经被缓存的组件
      const data = await getArticleDetail(this.$route.params.id)
      this.article = data
    }
  }
}

//获取地址栏ID  计算属性
//  computed:{
//     articleId（）{
//     return this.$route.params.id
//  },
//  methods:{
 //    async getArticlepetail（）{
  //   const data=await getArticlepetail（this.articleId）
//  }