Передача данных в компонент маршрута beforeEnter - PullRequest
Новая
       18

Передача данных в компонент маршрута beforeEnter

0 голосов
/ 23 июня 2019

У меня есть следующий маршрут 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

  • Можете ли вы установить свойство props компонента Vue из маршрутизатора?

Вопрос 2

  • Маршрут является динамическим.Если маршрут и компонент уже загружены и динамический параметр изменяется .... beforeEnter все еще срабатывает?Если нет, то куда мне поместить логику получения данных?Нужно ли мне watch для изменения маршрута внутри компонента Vue ?

1 Ответ

1 голос
/ 23 июня 2019

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