Vue项目入门教程9-文章详情页

系列文章：

• Vue项目入门教程1-项目介绍
• Vue项目入门教程2-Vue-cli搭建项目
• Vue项目入门教程3-项目改造
• Vue项目入门教程4-插件安装
• Vue项目入门教程5-Svg图标
• Vue项目入门教程6-数据mock
• Vue项目入门教程7-首页布局
• Vue项目入门教程8-首页数据
• Vue项目入门教程9-文章详情页
• Vue项目入门教程10-搜索页面
• Vue项目入门教程11-我的页面及其他
• Vue项目入门教程12-打包发布

新建页面组件

在src/views/目录下新建文件article.vue

<template>
  <div>
    article
  </div>
</template>

配置路由

在首页文章列表的数据处理部分，详情页的路由是这种格式/article/6

修改src/router/routes.js文件，添加文章详情的路由配置

// ...
const Article = res => require(['@/views/article'], res)

const routes = [
  // ...
  {
    path: '/article/:id',
    name: 'article',
    component: Article
  }
]

export default routes

页面布局

页面样式比较简单，不再累述

获取的文章详情内容部分，有图片，代码等。需要给这些设置样式，包括代码高亮等
内容部分是通过v-html标签展示的，对应的样式不能放在scoped里面

<style lang="less">
@import '../assets/less/article.less';
</style>

请求接口函数

修改src/api/article.js文件，添加获取文章详情方法

// ...
// 获取文章详情
export function getArticleDetail(id) {
  return request({
    url: '/article/detail',
    method: 'get',
    params: {
      id
    }
  })
}

获取文章详情

在src/views/article.vue文件中，添加获取文章分类方法

import { getArticleDetail } from 'api/article'
// ...
export default {
  // ...
  methods: {
    // ...
    getDetail() {
      getArticleDetail(this.$route.params.id).then(res => {
        this.article = res.data
      })
    }
  }
}

在created这个生命周期请求数据。

created() {
  this.getDetail()
}

时间处理

拿到的文章详情里面，更新时间是时间戳格式。
我们使用vux的dateFormat进行处理

import { dateFormat } from 'vux'
// ...
export default {
  filters: {
    dateFormat
  },
  // ...
}

Html代码中使用

<span>{{article.update_time|dateFormat}}</span>