新聞詳情頁面比較簡單，主要用到了v-html指令顯示HTML文本，如果后臺傳過來的是Markdown格式的文本，則使用MarkdownReader自定義組件解析，一般為提高顯示速度不建議客戶端解析，而是由服務端將markdown格式的文本轉換為HTML再返回到客戶端顯示 ~~~ <div v-html="pageData.content"></div> ~~~ 需要修改/src/router/index.js文件添加詳情頁面的路由 ~~~ { path: "/portal/news/detail", name: "PoraltNewsDetail", component: () => import("../views/portal/news/detail.vue"), }, ~~~ 完整的頁面代碼 文件路徑：/src/views/portal/news/detail.vue ~~~ <template> <div> <Banner :image="pageData.cover"></Banner> <ChannelHeader> <NavigatorPath :path="navigatorPathData"></NavigatorPath> <template v-slot:extra></template> </ChannelHeader> <div class="section"> <div class="section-title"> {{ pageData.title }} </div> <div class="section-content"> <!-- <MarkdownReader v-model="pageData.content"></MarkdownReader> --> <div v-html="pageData.description"></div> </div> </div> </div> </template> <script> import NavigatorPath from "@/components/navigator-path"; import ChannelHeader from "@/components/channel-header"; // import MarkdownReader from "@/components/markdown-reader"; import { news } from "@/common/api/portal"; export default { components: { NavigatorPath, ChannelHeader, // MarkdownReader, }, data() { return { navigatorPathData: [ { title: "首頁", path: "/portal", query: { menu: "home" } }, { title: "新聞動態", path: "/portal/news", query: { menu: "news" }, }, "內容詳情", ], id: 0, pageData: {}, }; }, methods: { async getPageData() { news.getDetail(this.id).then((res) => { if (res.errno == 0) { this.pageData = res.data; } else { this.$Message.info(res.errmsg); } }); }, }, mounted() { //獲取查詢參數 if (this.$route.query.id) { this.id = this.$route.query.id; this.getPageData(); } }, }; </script> <style scoped lang="scss"> .section { // font-size: 130%; .section-content { padding: 10px; line-height: 1.5; margin-top: 5px; } .section-title { font-size: x-large; font-weight: bold; padding: 10px; text-align: center; } } </style> ~~~