在Enter之前将数据传递给路由的组件 [英] passing data to route's component beforeEnter

问题描述

我有以下 VueRouter 路线

I have the following VueRouter route

{
      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

When the route is entered into everything executes as expected but I'm not sure how to pass the response.data to the route's component Videos

问题 1

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

问题 2

• 该路线是动态路线.如果路由和组件已经加载并且动态参数发生变化....beforeEnter 是否仍然触发?如果不是，我应该把我的数据获取逻辑放在哪里?我是否观察Vue 组件内的路由变化?

• The route is a dynamic route. If the route and component is already loaded and the dynamic parameter changes....does beforeEnter still fire? If not where should I put my data fetching logic? Do I watch for route changes inside the Vue component?

推荐答案

1)

这可能不是最优雅的方法，但可以通过以下方式实现:

This might not be the most elegant approach, but here's a way to achieve that:

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 函数中定义的变量.

2) IMHO, it would be easier if you could encapsulate the logic in the component. What do I mean by that is that you could fetch your data in the created hook and set it to a variable that you defined in your data function.

 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 钩子中，您将拥有如下内容:

Another approach, which may be suitable or not, depending on what you're working on, would be to have a parent component that fetches multiple playlists which could be stored in vuex. Thus, you would have another component that handles playlists/:id. Within this last mentioned component, in your created hook, you would have something like this:

created () {
    this.$store.commit('playlist/SET_CURRENT_PLAYLIST_ID', this.$route.params.id);
    this.videos = this.$store.getters['playlits/getVideosByPlaylistId'];
  },

这篇关于在Enter之前将数据传递给路由的组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！