vue router 传props 参数的问题

Question

如图我想传一个数据对象给urlsection组件，而内容需要请求route.query
所以用fetch请求了一下，得到结果return回去，得到props：{defineData：{}}的格式
但是子组件没有接到名为defineData的prop，所以想问下应该怎么写比较好
文档是这么写的，纠结好长时间了求指教
https://router.vuejs.org/zh-c...

{
    path: 'page',
    component: urlSection,
    props: (route) =>{
        let obj = {
            defineData:{}
        }
        fetch(route.query, (err, data) => {
            if(data){obj.defineData=data}
        })
        return obj
    },
    beforeEnter: (to, from, next) => {
        // ...
    }
},

我看见一个beforeEnter函数可以写在route里，能不能通过这个把props的内容修改呢？具体怎么操作?

Answer 1

import Vue from 'vue'
import VueRouter from 'vue-router'
import Hello from './Hello.vue'

Vue.use(VueRouter)

function dynamicPropsFn (route) {
  const now = new Date()
  return {
    name: (now.getFullYear() + parseInt(route.params.years)) + '!'
  }
}

const router = new VueRouter({
  mode: 'history',
  base: __dirname,
  routes: [
    { path: '/', component: Hello }, // No props, no nothing
    { path: '/hello/:name', component: Hello, props: true }, // Pass route.params to props
    { path: '/static', component: Hello, props: { name: 'world' }}, // static values
    { path: '/dynamic/:years', component: Hello, props: dynamicPropsFn }, // custom logic for mapping between route and props
    { path: '/attrs', component: Hello, props: { name: 'attrs' }}
  ]
})

我说的情况对应倒数第二种了

Answer 2

你这是异步return不出去
为什么不在组件内部created内发请求
数据获取