Vue 创建博客前端-DAY3-文章详情页面

添加文章详情页面

在 view 目录下新建 ArticleView.vue 展示文章详情。

配置路由

在 router/index.ts 中，将 ArticleView 添加为 Main 的子路由，并在 meta 中设置 showList=false。

import ArticleView from "../views/ArticleView.vue";

const routes = [
   ...
    children: [
      {
        path: "/article/:id",
        name: "article-detail",
        component: ArticleView,
        props: true,
        meta: {
          showList: false
        }
      }
    ]
];

读取文章信息

在 ArticleView.vue 的 <script></script>标签中添加:

import { Vue, Component, Prop } from "vue-property-decorator";

@Component({})
export default class PostDetail extends Vue {
  @Prop(String) id!: string;

  article = {};

  async fetch() {
    const res = await this.$http.get(`posts/${this.id}`, {});
    this.article = res.data;
  }

  created() {
    this.fetch();
  }
}