新手如何从零开始搭建自己的博客系统： 门户管理-新增文章详情

文章详情是整个博客系统最核心的页面，也是整个博客传递信息给读者的最近的地方。新建详情页面可以分为两个步骤，新增详情文件，新增路由，这也是所有新建页面的基本步骤。

src/views/postDetail.vue

<template>
    <div class="page-list">
        <div>{{ state.item.title }}</div>
        <div>{{ state.item.content }}</div>
    </div>
</template>
  
<script lang="ts" setup>
import { reactive } from "vue";
const state = reactive({
    item: {
        title: "这是第一篇文章",
        content: "这是www.dsiab.com网站上的第一篇文章内容"
    },

});

</script>

在src/router/index.ts文件中添加详情路由

{
      path: "/postDetail",
      component: () => import("@/views/postDetail.vue"),
    }

新增完成后打开一下地址可以看到一个简单的额效果，没有样式，数据也是写死的。

http://127.0.0.1:7910/#/postDetail

本文章由javascript技术分享原创和收集