根据知乎日报的api特点,分出了首页,内容页,专栏页和主题页
export default {
routes: [
{path: '/', component: NewsList},
{path: '/news/:id', component: NewsContent},
{path: '/topic/:id', component: TopicList},
{path: '/section/:id', component: SectionList}
]
}
在vuex状态中没有保存具体的文章内容,因此在切换到文章内容页前调用beforeRouteEnter这一导航钩子来完成文章内容的请求
beforeRouteEnter (to, from, next) {
next((vm) => {
vm.$emit('loadingStart')
let id = vm.$route.params.id
if (!vm.post.body) {
vm.getPost(id)
}
vm.getComment()
vm.$emit('loadingDone')
})
}
注意在路由导航阶段无法调用vue实例的this对象,要使用vm对象