Vuejs2 Modal with route in vue-router
I am trying to create a route with a modal and when you access with router-link to that router path the modal appears above the current page or if I access directly from the url the index appears with the modal above.
For example: I am at http: // localhost / profile / 1 and click on Create team sidebar, url changes to http: // localhost / team / creat , but the page is behind modal value http: // localhost / profile / 1 .
This is the code I'm trying:
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>
Everything works instead when I go to / create / team behind the modal blank
source to share
If anyone needs this solution, I solved it like this:
I created a component team Vue.component ("create-team", CreateTeam) and I put it in App.vue like this:
<create-team v-if="CreateTeam"></create-team>
In the same App.vue, I created a computation using a vuex getter:
computed: {
CreateTeam() {
return store.getters.createTeam
}
},
In the sidebar, I created a link like this:
<a @click="CreateTeam" class="user-panel-action-link" href="/create/team">
<i class="fa fa-users" aria-hidden="true"></i> Crear Equipo
</a>
And the CreateTeam method
CreateTeam(e) {
e.preventDefault()
store.commit('setTeamModal')
history.pushState('', 'Title of page', '/create/team');
}
The .js vuex store is simple:
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
})
And the last thing in the CreateTeam.vue component is the Close method, which I did something like this:
Close() {
this.$store.commit('deleteTeamModal')
this.$router.go(-1)
}
}
Can someone do it better that my little piece of help
Hello
source to share