用户登录

打开 post.routes,在这里添加一条新的路由,路由的名字叫 postShow,路由的地址是 /posts/:postId,这里的 :postId 是这个地址里的一个参数。 路由对应的 component 设置成 PostShow,等会儿可以去定义这个组件。

然后把 props 设置成 true,这样路由地址里的参数会作为组件的属性传递过去,也就是这个路由地址里有个 postId 参数,这样在这条路由对应的组件,也就是 PostShow 这个组件里,可以添加一个 postId 属性,它的值就是地址参数里的 postId 这个参数的值。

post-show 组件

在 src/post/show 的下面,新建一个组件,名字是 post-show.vue。 一组 template ,里面是组件的模板。再添加一个 script。

先从 vuex 里面,导入 mapGetters 还有 mapActions,它们来自 vuex 。 下面再从 vue 里面,导入 defineComponent ,它来自 vue。

默认导出一个东西,执行 defineComponent ,给它提供一个组件对象。 里面可以先用 props 设置一下组件的属性,添加一个 postId 属性,类型是 String。

再添加一个 created 生命周期方法, 然后再添加一个 computed ,把执行 mapGetters 返回的结果放进来,提供一个对象参数,组件里的名字叫 loading,对应的就是 post/show 这个 store 模块里的 loading 。下面再添加一个 post,对应的是 post/show 里的 post。

下面可以再添加一个计算属性,名字叫 showPost,它返回的值可以是 true 或者 false,判断一下 !this.loading && this.post ,加载状态是未加载,同时 post 有值,这个 showPost 返回的就是 true。

在组件里再添加一个 methods 选项,把执行 mapActions 返回的结果放进来,组件里叫 getPostById,对应的是 post/show 这个 store 模块里的 getPostById 这个动作。

有了这个方法以后可以在这个组件的 created 生命周期里执行一下,用一下组件里的 getPostById,给它提供一个内容 id 参数,可以设置成这个组件的 postId 这个属性的值。

组件模板

下面再处理一下这个组件的模板,一组 div,上面用 v-if 判断一下 showPost,如果它的值是 true 就显示一块东西。一组 h1 元素,里面绑定输出 post 里的 title 。 下面再用一组 div,绑定输出 post.content,小横线,一组 small 元素,里面绑定输出 post.user.name ,也就是内容作者的名字。

回到 post.routes,在这里要导入刚才创建的这个 PostShow 组件, 位置是当前目录 show 下面的 post-show.vue。

链接

然后打开 src/post/index/components/post-list-item, 这个是内容列表项目组件,项目的标题可以是一个链接,点击这个链接打开的就是内容页面。

这里用一个 router-link 组件,用它包装一下内容的标题。然后设置一下 router-link 组件的 to 属性的值,给它绑定一个值,一个对象,里面可以用 name 设置一下路由的名字,比如 postShow,再设置一下 params,路由地址的参数,设置一下 postId 这个地址参数,它的值就是 item 里的 id 这个属性的值。

预览

下面到浏览器上试一下,现在内容列表项目的标题是一个链接 ,点击这个链接 ,打开的就是这个内容页面。这个页面用的是 PostShow 组件。

组件被创建以后,会使用 post-show 这个 store 模块里的 getPostById 向服务端应用的内容接口,请求获取内容数据。有了内容数据以后会在组件绑定输出内容的标题,正文还有内容作者的名字。

内容页面:定义路由与组件《 Vue.js 前端应用 #12:应用架构 》

统计

13052
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点