在Enter之前将数据传递到路线的组件

时间:2019-06-23 15:06:00

标签: vue.js vuejs2 vue-component vue-router

我有以下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

  • 可以从路由器设置Vue组件的 props 属性吗?

问题2

  • 路线是动态路线。如果路径和组件已经加载,并且动态参数已更改。...beforeEnter仍会触发吗?如果没有,我应该在哪里放置数据获取逻辑?我是否watch Vue组件内部进行路线更改?

1 个答案:

答案 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'];
  },