新闻详情页面比较简单，主要用到了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> ~~~