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

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

src/views/postDetail.vue

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

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

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

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

http://127.0.0.1:7910/#/postDetail