router-linkしたコンポーネントからemitされたイベントを受信したい

目的

router-link元のコンポーネントに共通処理を作成しておいて、router-linkしたコンポーネントから、emitで呼び出せるようにしたい。

環境

• vue 2.4.3
• vue-router 3.0.1

結論

router-viewにイベントをアタッチ(v-on)すればOK。

例

router-link元のコンポーネント

router-viewにalertイベントをアタッチする。

// root.vue
<template>
    <div id="root">
        <h1>Root</h1>

        <template v-for="route in routes">
            <router-link :to="route.path" v-text="route.path"></router-link>
        </template>

        <router-view @alert="alert"></router-view>
    </div>
</template>

<script>
import Routes from './routes'

export default {
    data: function() {
        return {
            routes: Routes,
        }
    },
    methods: {
        alert: function (msg) {
            alert(msg)
        },
    },
}
</script>

router-linkしたコンポーネント

alertイベントを発行する。

// foo.vue
<template>
    <div>
        <h2>Foo</h2>
    </div>
</template>

<script>
export default {
    created: function () {
        this.$emit('alert', 'Foo')
    }
}
</script>

route設定

// routes.js
import Foo from './foo.vue'
import Bar from './bar.vue'

export default [
    { path: '/foo', component: Foo },
    { path: '/bar', component: Bar },
]