传递道具由Vue的路由器

Question

假设实例化的组件Vue.js我有一个Vue.js成分是这样的：

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

而且我想用它当VUE路由器的一些路线这样的匹配：

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

为了通过 'myProps' 的成分，我会做这样的事情

通常情况下：

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

，并在T他html：

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

在这种情况下，当路由匹配时，路由器自动绘制router-view元素中的组件。

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

Answer 1

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

，并在你的组件只需添加道具：

props: { 
     someValueToPass: String 
    }, 

VUE路由器将组件匹配道具

Answer 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