在vue-router中具有路由的Vuejs2 Modal

Question

我正在尝试使用模式创建路由，当您使用router-link访问此路由器路径时，在当前页面上方显示模式，或者如果我直接从url访问，则在上方显示具有模式的索引。

例如：我在http：// localhost / profile / 1中，然后单击侧边栏“创建团队”，URL更改为http：// localhost / team / create，但是模式后面的页面仍然是http：// localhost /配置文件/ 1。

这是我正在尝试的代码：

路由器：

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 }
      },  
      ]
    })

应用程序

<template>

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

</template>

模态值

<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>

一切正常，当我去模态后面的/ create / team时是空的

Answer 1

如果有人需要此解决方案，我可以通过以下方式解决：

我创建了一个组件create-team Vue.component（'create-team'，CreateTeam），并将其放在App.vue中，如下所示：

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

在同一App.vue中，我使用vuex getter创建了一个计算：

computed: {

    CreateTeam() {
         return store.getters.createTeam
    }
  },

在补充工具栏中，我创建了这样的链接：

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

和方法CreateTeam

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

    }

store.js vuex很简单：

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
})

最后一件事是在CreateTeam.vue组件中，我使用如下方法制作了Close方法：

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

  }

也许有人可以做得更好，这就是我的一点帮助

问候