Vuejs2 Modal 与 vue-router 中的路由 [英] Vuejs2 Modal with route in vue-router
问题描述
我正在尝试使用模态创建路由，当您使用路由器链接访问此路由器路径时，当前页面上方会出现一个模态，或者如果我直接从 url 访问，则会出现上面带有模态的索引.
例如:我在 http://localhost/profile/1 并单击侧边栏中的 Create将 url 更改为 http://localhost/team/create 但模态后面的页面仍然是 http://localhost/profile/1.
这是我正在尝试的代码:
路由器:
Vue.component('modal', Modal);导出默认的新路由器({模式:'历史'，路线:[{小路: '/'，name: '你好',组件:需要('@/components/Hello')，元:{ 认证:假}},{路径:'/团队'，name: '团队',组件:需要('@/components/team/Index')，元:{ 身份验证:真实}，},{路径:'/团队/创建'，name: '创建团队',成分: {b:创建团队},元:{ 身份验证:真实}},]})App.vue
<路由器视图></路由器视图><!-- 这是MODAL"路由器视图--><router-view name="b"></router-view></模板>Modal.vue
<div class="modal"><插槽名称="body"></插槽><button type="button" @click="$emit('close')">×</button></模板>
创建团队.vue
<modal @close="vm.$router.go(-1)"><div slot="body" class="col-md-12"><!-- 在此处填写--></modal></模板>
一切正常，当我转到模态后面的/create/team 时为空
如果有人需要这个解决方案，我是这样解决的:
我创建了一个组件 create-team Vue.component('create-team',CreateTeam) 并将其放入 App.vue 中，如下所示:
在同一个 App.vue 中，我用 vuex getter 创建了一个计算:
计算:{创建团队(){返回 store.getters.createTeam}},在侧边栏中我创建了一个这样的链接:
<i class="fa fa-users" aria-hidden="true"></i>科瑞设备</a>还有一个方法 CreateTeam
CreateTeam(e) {e.preventDefault()store.commit('setTeamModal')history.pushState('', '页面标题', '/create/team');}store.js vuex 很简单:
const state = {创建团队:假，}常量突变 = {setTeamModal(状态){state.createTeam= 真},deleteTeamModal(状态){state.createTeam=假}}常量动作 = {setTeamModal: ({ commit }) =>提交('setTeamModal')deleteTeamModal: ({ commit }) =>提交('setTeamModal')}const 吸气剂 = {创建团队:状态 =>state.createTeam}导出默认新 Vuex.Store({状态，吸气剂，行动，突变})最后一件事是在 CreateTeam.vue 组件中的 Close 方法中，我做了这样的事情:
Close() {this.$store.commit('deleteTeamModal')this.$router.go(-1)}}也许有人可以让它变得更好，这是我的一点帮助
问候
I'm trying to create a route with a modal and when you access with router-link to this router-path appears a modal above the current page or if i access directly from url appears the index with modal above.
For example: I'm in http://localhost/profile/1 and click in the sidebar Create team the url changes to http://localhost/team/create but the page behind the modal still is 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 is working instead that when i go to /create/team behind the modal is empty
If anyone needs this solution, i solved this way:
I created a component create-team Vue.component('create-team',CreateTeam) and i put it in the App.vue like this:
<create-team v-if="CreateTeam"></create-team>
In the same App.vue i created a computed with a vuex getter:
computed: {
CreateTeam() {
return store.getters.createTeam
}
},
In 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 a method CreateTeam
CreateTeam(e) {
e.preventDefault()
store.commit('setTeamModal')
history.pushState('', 'Title of page', '/create/team');
}
The store.js vuex 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 is in the CreateTeam.vue component the Close method i made somthing like this:
Close() {
this.$store.commit('deleteTeamModal')
this.$router.go(-1)
}
}
Maybe someone can make it better, that's my little piece of help
Greetings
这篇关于Vuejs2 Modal 与 vue-router 中的路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
