首页 文章

将道具传递给Vue-router实例化的Vue.js组件

提问于
浏览
29

假设我有一个像这样的Vue.js组件:

var Bar = Vue.extend({
    props: ['my-props'],
    template: '<p>This is bar!</p>'
});

我希望在vue-router中的某些路由匹配时使用它:

router.map({
    '/bar': {
        component: Bar
    }
});

通常,为了将'myProps'传递给组件,我会做这样的事情:

Vue.component('my-bar', Bar);

并在HTML中:

<my-bar my-props="hello!"></my-bar>

在这种情况下,路由器在路由匹配时自动绘制路由器视图元素中的组件 .

我的问题是,在这种情况下,我如何将道具传递给组件?

5 回答

  • 3
    <router-view :some-value-to-pass="localValue"></router-view>
    

    并在您的组件中添加prop:

    props: {
          someValueToPass: String
        },
    

    vue-router将匹配组件中的prop

  • 2
    const User = {
          props: ['id'],
          template: '<div>User {{ id }}</div>'
        }
        const router = new VueRouter({
          routes: [
            { path: '/user/:id', component: User, props: true }
    
            // for routes with named views, you have to define the props option for each named view:
            {
              path: '/user/:id', 
              components: { default: User, sidebar: Sidebar },
              props: { default: true, sidebar: false }
            }
          ]
        })
    

    对象模式

    const router = new VueRouter({
      routes: [
        { path: '/promotion/from-newsletter', component: Promotion, props: { newsletterPopup: false } }
      ]
    })
    

    这是官方的答案 . link

  • 4

    在路由器中,

    const router = new VueRouter({
      routes: [
        { path: 'YOUR__PATH', component: Bar, props: { authorName: 'Robert' } }
      ]
    })
    

    <Bar /> 组件中,

    var Bar = Vue.extend({
        props: ['authorName'],
        template: '<p>Hey, {{ authorName }}</p>'
    });
    
  • 42

    遗憾的是,没有解决方案实际上回答了这个问题所以这里是一个来自quora

    基本上docs解释不好的部分是

    当props设置为true时,route.params将被设置为组件道具 .

    所以在通过路线发送道具时你真正需要的是将它分配给 params key ex

    this.$router.push({
        name: 'Home',
        params: {
            theme: 'dark'
        }
    })
    

    所以完整的例子就是

    // component
    const User = {
      props: ['test'],
      template: '<div>User {{ test }}</div>'
    }
    
    // router
    new VueRouter({
      routes: [
        { 
          path: '/user',
          component: User,
          name: 'user',
          props: true 
        }
      ]
    })
    
    // usage
    this.$router.push({
        name: 'user',
        params: {
            test: 'hello there' // or anything you want
        }
    })
    
  • 0

    要直接回答这个问题,在撰写本文时,没有直接的方法来做你想做的事情(除了之前的答案已经显示的那些) . 但即使有,我也不认为这是可取的 .

    url是资源的表示,它是驱动状态更改的资源(有时连同其url) . url可以携带一些状态数据,但它仅限于协议,主机,路径和查询字符串 . 任何更复杂的东西必须作为某个资源的一部分携带,作为对请求/导航的响应而生成或生成 .

    通过路由器将数据传递给组件类似于后台交易 . 你没有经过适当的渠道给予国家,这意味着该组件获得的状态不是对导航的直接反应,而是由于一些模糊的机制 . 通常状态应该作为对网址变化的反应而改变,而不是通过一些替代逻辑 . 它使您的应用程序更具可预测性 .

    通常在数据已经存在的情况下,可能很容易通过路由器传递数据的情况,并且再次查询数据似乎是多余的或浪费的 . 但是,如果您只是将浏览器打开到该URL,那么数据应该从何而来呢?如果推理是不希望它只是插入那个位置,那么也许你只需要一个通向它的路径,也许你只需要一个带有点击事件处理程序的东西,它将加载一个组件并传递数据你想要的方式 .

    另一方面,如果您认为您需要路由(因此是路由器)来访问资源,那么这种情况恰好适合于状态管理器(即类似Vuex的东西) .

    因此,不是通过路由器将数据传递给组件,而只是为它提供必要的最小值,以便能够向状态管理器查询更多更完整的数据(即只需使用vue-router和vuex)意味着要使用) .

    反过来,如果要在获取数据时避免冗余,请在状态管理器中使用一些缓存机制 .

相关问题