添加文章详情页面
在 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();
}
}
