黑马头条项目练习(day06)

今天来到了文章详情页面,首先第一件事肯定是部署好我们的页面组件路由嘛

{
    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!

经验分享 程序员 微信小程序 职场和发展