素材牛VIP会员
vue router 传props 参数的问题
 冷***知  分类:JavaScript  人气:1135  回帖:2  发布于6年前 收藏

如图我想传一个数据对象给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的内容修改呢?具体怎么操作?

讨论这个帖子(2)垃圾回帖将一律封号处理……

Lv3 码奴
wa***88 产品经理 6年前#1

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

Lv3 码奴
ji***ui 软件测试工程师 6年前#2
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' }}
  ]
})

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

 文明上网,理性发言!   😉 阿里云幸运券,戳我领取