Vuejs2 Modal mit Route in vue-Router

Question

Ich versuche eine Route mit einem modalen zu erstellen, und wenn Sie mit Router-Link auf diesen Router-Pfad zugreifen, erscheint ein Modal über der aktuellen Seite oder wenn ich direkt von URL aufrufen der Index mit modal oben.

Zum Beispiel: Ich bin in http://localhost/profile/1 und klicken Sie in der Seitenleiste erstellen Team die URL Änderungen http://localhost/team/creat aber die Seite hinter dem modalen http://localhost/profile/1 noch.

Dies ist der Code ich versuche:

Router:

Vue.component('modal', Modal);  
export default new Router({ 
     mode: 'history', 
     routes: [ 
     { 
     path: '/', 
     name: 'Hello', 
     component: require('@/components/Hello'), 
     meta: { auth: false } 
     }, 

     { 
     path: '/team', 
     name: 'team', 
     component: require('@/components/team/Index'), 
     meta: { auth: true }, 
     }, 
     { 
     path: '/team/create', 
     name: 'CreateTeam', 
     components: { 
      b: CreateTeam 
     }, 
     meta: { auth: true } 
     }, 
     ] 
    }) 

App.vue

<template> 

    <router-view></router-view> 
<!--This is the "MODAL" router-view --> 
    <router-view name="b"></router-view>    

</template> 

Modal.vue

<template> 
    <div class="modal"> 

     <slot name="body"></slot> 
     <button type="button" @click="$emit('close')">×</button> 
    </div> 
</template> 

CreateTeam.vue

<template> 
    <modal @close="vm.$router.go(-1)"> 

     <div slot="body" class="col-md-12"> 
     Form here 
     </div> 

    </modal> 
</template> 

Alles funktioniert, anstatt dass, wenn ich gehen/create/Team hinter dem modalen

Answer 1

leer Wenn jemand diese Lösung benötigt, löste ich auf diese Weise:

ich eine Komponente create-Team erstellt Vue.component ('create-Team', CreateTeam) und ich habe es in der App.vue wie folgt aus:

<create-team v-if="CreateTeam"></create-team> 

im gleichen App.vue i a erstellt mit einem vuex Getter berechnet:

In Sidebar ich einen Link wie folgt erstellt:

<a @click="CreateTeam" class="user-panel-action-link" href="/create/team"> 
    <i class="fa fa-users" aria-hidden="true"></i> Crear Equipo 
</a> 

und ein Verfahren CreateTeam

CreateTeam(e) { 
     e.preventDefault() 
     store.commit('setTeamModal') 
     history.pushState('', 'Title of page', '/create/team'); 

    } 

Die store.js vuex ist einfach:

const state = { 

    createTeam: false, 
} 

const mutations = { 

    setTeamModal (state) { 
     state.createTeam= true 
    }, 
    deleteTeamModal (state) { 
     state.createTeam= false 
    } 
} 

const actions = { 
    setTeamModal: ({ commit }) => commit('setTeamModal') 
    deleteTeamModal: ({ commit }) => commit('setTeamModal') 
} 

const getters = { 

    createTeam: state => state.createTeam 
} 

export default new Vuex.Store({ 
    state, 
    getters, 
    actions, 
    mutations 
}) 

Und die Letzte Sache ist in der CreateTeam.vue-Komponente die Close-Methode, die ich so gemacht habe:

Close() { 
     this.$store.commit('deleteTeamModal') 
     this.$router.go(-1) 
    } 

    } 

Vielleicht hat jemand es besser machen kann, das ist mein kleines Stück Hilfe

Grüße