{"action":"created","issue":{"url":"https://api.github.com/repos/vuejs/vue-router/issues/1923","repository_url":"https://api.github.com/repos/vuejs/vue-router","labels_url":"https://api.github.com/repos/vuejs/vue-router/issues/1923/labels{/name}","comments_url":"https://api.github.com/repos/vuejs/vue-router/issues/1923/comments","events_url":"https://api.github.com/repos/vuejs/vue-router/issues/1923/events","html_url":"https://github.com/vuejs/vue-router/issues/1923","id":279287327,"node_id":"MDU6SXNzdWUyNzkyODczMjc=","number":1923,"title":"Resolving async data in router with async props","user":{"login":"FrEaKmAn","id":232901,"node_id":"MDQ6VXNlcjIzMjkwMQ==","avatar_url":"https://avatars1.githubusercontent.com/u/232901?v=4","gravatar_id":"","url":"https://api.github.com/users/FrEaKmAn","html_url":"https://github.com/FrEaKmAn","followers_url":"https://api.github.com/users/FrEaKmAn/followers","following_url":"https://api.github.com/users/FrEaKmAn/following{/other_user}","gists_url":"https://api.github.com/users/FrEaKmAn/gists{/gist_id}","starred_url":"https://api.github.com/users/FrEaKmAn/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/FrEaKmAn/subscriptions","organizations_url":"https://api.github.com/users/FrEaKmAn/orgs","repos_url":"https://api.github.com/users/FrEaKmAn/repos","events_url":"https://api.github.com/users/FrEaKmAn/events{/privacy}","received_events_url":"https://api.github.com/users/FrEaKmAn/received_events","type":"User","site_admin":false},"labels":[{"id":253862138,"node_id":"MDU6TGFiZWwyNTM4NjIxMzg=","url":"https://api.github.com/repos/vuejs/vue-router/labels/feature%20request","name":"feature request","color":"fbca04","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":4,"created_at":"2017-12-05T08:31:08Z","updated_at":"2018-06-22T13:29:52Z","closed_at":null,"author_association":"NONE","body":"### What problem does this feature solve?\r\nIdea it to handle all async data in the router stage, so the component already get's the data without a need for v-if checking. vue-router already has `beforeRouteEnter` and `beforeRouteEnter`, but I think it's too complicated because I need to reimplement both methods to be able to reuse component, the code overhead is to large and it also doesn't enable me to reuse component (same component, different data source).\r\n\r\n### What does the proposed API look like?\r\nAPI proposes to add additional logic into router beforeEach (this is always called). Changes to router are\r\n\r\n```javascript\r\nrouter.beforeEach((to, from, next) => {\r\n    to.matched.forEach((match) => {\r\n        Object.keys(match.props).forEach(propKey => {\r\n            let props = match.props[propKey];\r\n            if (typeof props === \"boolean\") {\r\n                next();\r\n            } else {\r\n                if (!match._cache_props) {\r\n                    match._cache_props = props;\r\n                }\r\n\r\n                match._cache_props(to).then((data) => {\r\n                    match.props[propKey] = () => data;\r\n                    next();\r\n                });\r\n            }\r\n        });\r\n\r\n    });\r\n});\r\n```\r\n\r\nand then we simply make our props async\r\n\r\n```javascript\r\nroute = {\r\n    path: '/products/:id',\r\n    name: 'products.product',\r\n    component: Product,\r\n    props: async (route) => ({\r\n        product: await http.get(`products/${route.params.id}`).then(r => r.data)\r\n    })\r\n}\r\n```\r\n\r\nThis will first resolve the data, then render the component. All data will be passed to component through standard `props`.\r\n\r\nOf course, there is additional works to handle all types of props and to have dependency resolves (I resolve something based on previous resolve).\r\n\r\n<!-- generated by vue-issues. DO NOT REMOVE -->"},"comment":{"url":"https://api.github.com/repos/vuejs/vue-router/issues/comments/399442658","html_url":"https://github.com/vuejs/vue-router/issues/1923#issuecomment-399442658","issue_url":"https://api.github.com/repos/vuejs/vue-router/issues/1923","id":399442658,"node_id":"MDEyOklzc3VlQ29tbWVudDM5OTQ0MjY1OA==","user":{"login":"posva","id":664177,"node_id":"MDQ6VXNlcjY2NDE3Nw==","avatar_url":"https://avatars0.githubusercontent.com/u/664177?v=4","gravatar_id":"","url":"https://api.github.com/users/posva","html_url":"https://github.com/posva","followers_url":"https://api.github.com/users/posva/followers","following_url":"https://api.github.com/users/posva/following{/other_user}","gists_url":"https://api.github.com/users/posva/gists{/gist_id}","starred_url":"https://api.github.com/users/posva/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/posva/subscriptions","organizations_url":"https://api.github.com/users/posva/orgs","repos_url":"https://api.github.com/users/posva/repos","events_url":"https://api.github.com/users/posva/events{/privacy}","received_events_url":"https://api.github.com/users/posva/received_events","type":"User","site_admin":false},"created_at":"2018-06-22T13:29:52Z","updated_at":"2018-06-22T13:29:52Z","author_association":"MEMBER","body":"To be clear, async data is already feasible in the current state of vue-router and it is documented. This feature would make things more declarative and easier to test"}}
{"actor":{"display_login":"posva"}}