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

时间:2016-06-21 06:44:37

标签: vue.js vue-router

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

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

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

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

通常是为了通过myProps&#39;对于组件,我会做这样的事情:

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

并在html中:

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

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

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

6 个答案:

答案 0 :(得分:50)

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

并在您的组件中添加prop:

props: {
      someValueToPass: String
    },

vue-router将匹配组件中的prop

答案 1 :(得分:5)

在路由器中,

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>'
});

答案 2 :(得分:4)

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

docs不能很好地解释的部分是

  

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

因此,通过路线发送道具时,您真正需要的是将其分配给params键,例如

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
    }
}) 

答案 3 :(得分:3)

 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 :(得分:0)

使用:

this.$route.MY_PROP

获得路线道具

答案 5 :(得分:0)

这个问题很旧,所以我不确定在问这个问题时是否存在Function mode,但是它只能用来传递正确的道具。它仅在路线更改时调用,但是所有Vue反应性规则都适用于您已通过的任何数据(如果已经是反应性数据)。

// Router config:
components:
{
    default: Component0,
    named1: Component1
},
props:
{
    default: (route) => {
        // <router-view :prop1="$store.importantCollection"/>
        return { prop1: store.importantCollection }
    },
    named1: function(route) {
        // <router-view :anotherProp="$store.otherData"/>
        return { anotherProp: store.otherData }
    },
}

请注意,这仅在prop函数的作用域内有效,以便可以看到要传递的数据。 route参数不提供对Vue实例,Vuex或VueRouter的引用。同样,named1示例说明this也未绑定到任何实例。这似乎是设计使然,因此状态仅由URL定义。由于这些问题,最好使用命名视图在标记中接收正确的道具,然后让路由器切换它们。

// Router config:
components:
{
    default: Component0,
    named1: Component1
}

<!-- Markup -->
<router-view name="default" :prop1="$store.importantCollection"/>
<router-view name="named1" :anotherProp="$store.otherData"/>

使用这种方法,您的标记会声明可能的视图的意图并进行设置,但路由器会决定激活哪些视图。