我有以下VueRouter路线
{
path: '/playlists/:id',
name: 'videos',
component: Video,
props: {
videos: []
},
beforeEnter (to, from, next) {
Vue.axios.get('/playlistitems?playlistId='.concat(to.params.id))
.then((response) => {
to.params.videos = response.data
next((vm) => {
console.log(vm)
vm.videos = response.data
})
})
.catch((err) => console.log('error', err))
}
}
输入路线后,一切都会按预期执行,但是我不确定如何将response.data
传递给路线的组件Videos
问题1
问题2
beforeEnter
仍会触发吗?如果没有,我应该在哪里放置数据获取逻辑?我是否watch
在 Vue组件内部进行路线更改?答案 0 :(得分:1)
1)
这可能不是最优雅的方法,但是可以通过以下方法实现:
let videos = [];
export default new Router({ ... });
{
path: '/playlists/:id',
name: 'videos',
component: Video,
props: route => ({ videos }),
beforeEnter (to, from, next) {
Vue.axios.get('/playlistitems?playlistId='.concat(to.params.id))
.then((response) => {
// Now the data will be available when the props will be initialized
videos = response.data
next()
})
.catch((err) => console.log('error', err))
}
}
// Videos.vue
props: {
videos: Array
},
2)
恕我直言,如果您可以将逻辑封装在组件中会更容易。
我的意思是,您可以在created
钩子中获取数据,并将其设置为在data
函数中定义的变量。
data() {
return {
videos: []
}
},
created () {
Vue.axios.get('/playlistitems?playlistId='.concat(this.$route.params.id))
.then((response) => {
this.videos = response.data;
})
.catch((err) => console.log('error', err))
},
另一种方法(取决于您正在使用的方法)是否合适,取决于您正在处理的内容,它的父组件可以获取多个可以存储在vuex中的播放列表。
因此,您将拥有另一个处理playlists/:id
的组件。
在最后提到的组件中,在您的created
钩中,您将得到类似以下内容的信息:
created () {
this.$store.commit('playlist/SET_CURRENT_PLAYLIST_ID', this.$route.params.id);
this.videos = this.$store.getters['playlits/getVideosByPlaylistId'];
},