Question

当我尝试使用点击事件在嵌套路由器视图中定位子组件时，我似乎做错了什么。

现状： 我有一个组件和组件二。两者都有一个名为dialog的子组件。

通过父组件仪表板中的路由器视图加载组件1和组件2。每个视图都有一个按钮，用于显示其子组件＆＃34; Modal＆＃34;。

按钮似乎在加载到pageload上的视图上正常工作。但是一旦我切换路由，showModal函数就不知道要从哪个视图定位的对话框元素。

我认为组件会在切换路线时被破坏并重建，但显然不是。

这是我的代码，我希望有人能够提供帮助：

应用

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)
/**
 * First we will load all of this project's JavaScript dependencies which
 * include Vue and Vue Resource. This gives a great starting point for
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap')

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the body of the page. From here, you may begin adding components to
 * the application, or feel free to tweak this setup for your needs.
 */

Vue.component('vuetest', require('./components/vuetest.vue'))

const Dashboard = require('./components/dashboard.vue')
const FirstRoute = require('./components/firstroute.vue')
const Second = require('./components/secondroute.vue')

const routes = [
    {
        path: '/dashboard',
        component: Dashboard,
        children: [
            {
                path: 'firstview',
                name: 'firstview',
                canReuse: false,
                component: FirstRoute
            },
            {
                path: 'secondview',
                name: 'secondview',
                canReuse: false,
                component: Second
            }
        ]
    }
]

const router = new VueRouter({
    routes // short for routes: routes
})

window.EventHub = new Vue()

const app = new Vue({
    el: '#app',
    router
});

Vuetest

<template>
    <div>
        <h1>Vue Test</h1>
        <router-view></router-view>
    </div>
</template>

<script>
    export default {
        created() {

        },
        mounted() {
            console.log('Component ready.')
        }
    }
</script>

信息中心路线

<template>
    <div>
        <h1>Dashboard</h1>
        <navigation></navigation>
        <router-view></router-view>
    </div>
</template>
<script>
    Vue.component('navigation', require('./navigation.vue'))
</script>

导航

<template>
    <div>
        <router-link :to="{ name: 'firstview' }">first</router-link>
        <router-link :to="{ name: 'secondview' }">second</router-link>
    </div>
</template>

第一条路线

<template>
    <div class="firstroute">
        <h1>First Route</h1>
        <button class="showmodal" v-on:click="showModal">Showmodal</button>
        <modal></modal>
    </div>
</template>
<script>
    export default {
        methods: {
            showModal: function () {
                EventHub.$emit('showModal')
            }
        }
    }
    Vue.component('modal', require('./modal.vue'));
</script>

第二条路线

<template>
    <div class="secondroute">
        <h1>Second Route</h1>
        <button class="showmodal" v-on:click="showModal">Showmodal</button>
        <modal></modal>
    </div>
</template>
<script>
    export default {
        methods: {
            showModal: function () {
                EventHub.$emit('showModal')
            }
        }
    }
    Vue.component('modal', require('./modal.vue'));
</script>

模态

<template>
    <div class="dialog hidden">
        Dialog
    </div>
</template>
<style>
    .hidden {
        display: none;
    }
</style>
<script>
    export default{
        created() {
            EventHub.$on('showModal', this.showModal);
        },
        methods: {
            showModal: function() {
                document.querySelector('.dialog').classList.toggle('hidden');
            }
        }
    }
</script>

我真的很感激任何帮助。

Answer 1

微小的推荐

'：class'指令而不是本机代码：

document.querySelector('.dialog').classList.toggle('hidden');

成分：

import Modal from './modal' 

export default {
  ...
  components:
    Modal
  }
  ...
}

而不是

Vue.component('modal', require('./modal.vue'));

..对于这种情况，Vuex也是一个好点

附加：

https://github.com/vuejs/vue-devtools

https://jsfiddle.net/uLaj738k/2/

Answer 2

事实证明问题是我调用querySelector方法的那一刻。

将.dialog元素分配给mounted()中的const解决了我的问题。

使用Vue 2中的可重用组件与vue路由器配合使用

2 个答案: