vue-router：在使用命名視圖時將道具傳遞到組件

Question

我在vue-router中使用named views。在兩個組件的內部，我需要獲取道具。

以下代碼顯示路線的定義。第一項不起作用。在組件內部，道具將保持未定義狀態。因此，麪包屑和收集組件越來越沒有財產

第二個例子工程，因爲只有一個組件：

const routes = [ 
    { 
     path: '/:cid', 
     name: 'collection', 
     props: true, 
     components: { 
      default: Collection, 
      breadcrumb: Breadcrumb 
     } 
    }, 
    { 
     path: '/:cid/:iid', 
     name: 'item', 
     props: true, 
     component: Item 
    }, 
] 

我覺得這個道具屬性只是一個工作，當只有一個組件。

我沒有在文檔中找到解決方案，因此歡迎任何幫助。

Answer 1

是的，你可以使用多個組件，並通過道具各一個：

const router = new VueRouter({ 
    mode: 'history', 
    routes: [ 
    { 
     path: '/', 
     components: { 
     default: Home, 
     foo: Foo 
     }, 
     props: { 
     default: { name: 'Home' }, 
     foo: { name: 'Foo' } 
     } 
    } 
    ] 
}) 

http://jsfiddle.net/jonataswalker/ykf0uv0d/

See related discussion.

Answer 2

在組件中，您必須明確聲明props，因爲在路徑對象中將prop設置爲true，路徑的參數會綁定到道具。

// Collection component 
export default { 
props: ['cid'], 
template: ..., 
} 

// Breadcrumb component 

export default { 
props: ['cid', 'iid'], 
template: ..., 
} 

查看有關將路徑傳遞給Route組件的文檔。

Passing props to Route component