Vueのルートメタデータのキーは真

Question

に設定されている場合、私はVUE-ルータを使用していると私は、次のような機能を作成しようとしている特定のルートでモーダルとしてコンポーネントをレンダリング：

私が指定できるようにしたいですコンポーネントがモーダルでレンダリングされるべきかどうかをルーターはルーティングします。それがモーダルでレンダリングされている場合は、下のすべてのコンポーネントをそのまま（モーダルマスクの下に）保ちます。 基本的なモーダル構造を持つモーダルラッパーコンポーネントを作成しました。slotはモーダルボディの内部にあります。そのため、レンダリングするコンポーネントはslotになるはずです。しかし、それを達成する方法。 Vue-Routerにはその機能のオプションがありますか？

ルータルート：以前のルータビューを重ねながら成分モーダル内部に描画するかどうので

{ 
    path: '/customers/:clientId', 
    component: customerView 
    meta: { 
    auth: true, 
    }, 
}, 
{ 
    path: '/customers/:clientId/addAddress', 
    component: dataViewAdd 
    meta: { 
    openInModal: true, 
    auth: true, 
    }, 
}, 

、私は病気の必要性2ルータ・ビューを推測します。各モーダルルートに表示されるコンポーネントは非モーダルコンテキストで使用されなかった場合は、モーダルコンポーネントは、テンプレートのルートになるように

<router-view class="normal-view"></router-view> 
<router-view class="modal-view" name="modal-view"></router-view> 

Answer 1

は、その後、あなただけ（dataViewAdd）モーダルルートコンポーネントのテンプレートを変更することができます。しかし、別の状況でこれらのコンポーネントを再利用すると述べました。したがって、1つのルートはモーダル内にdataViewAddを使用し、もう1つのルートはモーダル内にはないdataViewAddを使用する可能性があります。

各コンポーネントのラッパー・モーダル・バージョンを作成できますが、それは面倒です。 openInModal: trueを指定してどのコンポーネントでも使用できるようにしたいと思うようです。

また、DOMのモーダルの位置は関係ありません（そうでなければ、これを助けるためにportal-vueのようなものを使用することをお勧めします）。

まず、モーダルルートがその下に表示したいコンポーネントの子になるようにルータの設定を変更する必要があります。 customerViewに<router-view>が含まれていることを確認してください。

コンポーネントのモーダルラップバージョンを返すヘルパー関数を作成し、それをルートコンポーネントとして使用します。これはopenInModalメタプロパティを使用しませんが、同様の方法で動作します。

次のコードはテストされていません。

import Modal from './modal.vue'; 

function wrapInsideModal(childComponent) { 
    return { 
    functional: true, 
    render(h) { 
     return h(Modal, [h(childComponent)]); 
    }, 
    }; 
} 

// Routes 
{ 
    path: '/customers/:clientId', 
    component: customerView, 
    meta: { 
    auth: true, 
    }, 
    children: [ 
    { 
     path: 'addAddress', 
     component: wrapInsideModal(dataViewAdd), 
    }, 
    ], 
},