今天来到了文章详情页面,首先第一件事肯定是部署好我们的页面组件路由嘛
{
path: "/article/:articleId",
name: "ArticleIndex",
component: () => import("@/views/article"),
props: true, // 动态路径参数的解耦: 将动态路由路径的参数映射到对应组件的props属性中
},
这次路由使用到了路由解耦:props
该属性能够将动态路由路径的参数映射到对应组件的props属性中,这样在拿路径中参数的时候就很方便了
然后就是配置我们的页面api了
/**
* 根据 id 获取指定文章
*/
export const getArticleById = (articleId) => {
return request({
method: "GET",
url: `/v1_0/articles/${articleId}`,
});
};
配置好api之后就可以开始写我们的页面代码了
下面就是views/article/index.vue的代码了,同时我们还引入了一个插件,github-markdown.css(可以把文章转成markdown格式,看上去更美观)
再结合之前的搜索功能,挂载一下路由节点,就可以实现搜索文章点击查看文章详情了
over!