Vuejsテンプレートの継承

Question

テンプレート継承を使用するにはどうすればよいですか（ヒスイのように、extends file.jadeと同じ名前のブロックを上書きします）？

私は構成ですべてを行うことができますが、1つまたは2つのページ（例：ログインページ）以外のすべてのページに表示されるフッターとヘッダーなどのコンポーネントでは、すべてのコンポーネントに書き込む必要があります。私のアプリでは、私は2つのレベルのナビゲーションがあり、それはそれらの子コンポーネントのすべて1つでそれらを繰り返すことは痛いようです：（

私は玉を使用することができ、私は落ち着いてきた何

// Component.vue 

<template lang="jade"> 
    extends ./StandardLayout 
    block content 
    router-view 
</template> 

// StandardLayout.Vue 

<template lang="jade"> 
    div 
    navbar 
    div.container 
     div.spacer 
     div.row 
     block content 
<template> 

？これを行うには、他の方法があり、私はいくつかのヒスイといくつかのVueのファイルを持っている。なぜなら、ヒスイのレイアウトで満たさレイアウトフォルダであると私は使用私のコンポーネントを拡張するために私はwebpack templateとvue-cliを使用しました。

Answer 1

最も一般的な場合同じHTMLを何度も何度も繰り返す必要がある場合、使用できるオプションは<partial>です。ここにあなたが単一ページのアプリケーションあなたが従うことができる戦略は、単にあなたの<router-view>周りのヘッダーとフッターを持つことですを構築している場合は、しかし、

Vue.partial('header', '<h3>This is the title: {{title}}</h3>') 
Vue.partial('footer', '<footer>Mini footer</footer>') 

としてパーシャルを宣言

<partial name="header"></partial> 
<div>My content content</div> 
<partial name="footer"></partial> 

は、ありますどのように行うかを示すjsfiddle。

https://jsfiddle.net/gurghet/vdqutw2y/

<header><h1> 
My title: {{title}} 
</h1></header> 
<p> 
    <a v-link="{ path: '/foo' }">Go to Foo</a> 
    <a v-link="{ path: '/bar' }">Go to Bar</a> 
</p> 
<router-view></router-view> 
<footer>Such footer, many links, wow!</footer>