Vuejs2 Modal with vue-router

我正在尝试创建一个模式路由，并且当您使用路由器链接访问此路由器路径时，会在当前页面上方显示一个模式，或者如果我直接从URL访问上面的模态指数。Vuejs2 Modal with vue-router

例如：我在http://localhost/profile/1并点击侧边栏创建团队URL更改为http://localhost/team/creat，但模态后面的页仍为http://localhost/profile/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 } 
     }, 
     ] 
    })

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>

一切工作，而不是当我去/制作/团队背后的模式是空的

来源

2017-06-16 Snickfire

你的模式不应该在这种情况下，路由，它应该是相同的部件的要素是放置你的'路由器视图'。当需要显示它时，使用事件或状态管理从该组件中触发它，甚至通过'router-view'将一个函数传递给需要触发它的组件。 – Bert

我明白，但在这种情况下，我想打开任何组件像“全球模式”。如果我喜欢你说所有的组件都必须有模态组件和diferents路径的代码ex：profile/modal，team/modal“我想在任何地方打开团队/创建 – Snickfire

不，这不是我它应该生活在App.vue中，它不应该是一个路线，你的组件*是路线应该触发它。 – Bert

如果有人需要这样的解决方案，我解决了这个办法：

我创建了一个组件创建团队Vue.component（“创建团队”，CreateTeam），我把它放在App.vue这样的：

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

同样App.vue我创建了一个计算与vuex消气：

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

    }

也许有人可以做的更好，这是我的小片的帮助

问候

来源

2017-06-22 22:04:43 Snickfire

不错的一个！也会给你一个尝试 - 很好的了解'history.pushState（..）'只适用于vue-router。 – Hartmut

Vuejs2 Modal with vue-router

回答

相关问题