我正在尝试在我的App.vue中获取当前路由的名称，但我得到的只是一个null响应 .

在我的App.vue中：

export default {
    created() {
        console.log(this.$route.name)
    }
}

在我的./router/index.js中：

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

const Hero = () =>
    import ('../components/Hero.vue')

const Home = () =>
    import('../pages/Home.vue')

const Videos = () =>
    import ('../pages/Videos.vue')

const VideosYoutube = () =>
    import ('../pages/VideosYoutube.vue')

const VideosFacebook = () =>
    import ('../pages/VideosFacebook.vue')

const VideosTwitter = () =>
    import ('../pages/VideosTwitter.vue')

const test = () =>
    import('../pages/Example.vue')

const routes = [{
    name: 'home',
    path: '/',
    component: Home
}, {
    name: 'videos',
    path: '/videos',
    components: {
        default: Videos,
        hero: Hero
    }
}, {
    name: 'videos-youtube',
    path: '/videos/youtube',
    components: {
        default: VideosYoutube,
        hero: Hero
    }
}, {
    name: 'videos-facebook',
    path: '/videos/facebook',
    components: {
        default: VideosFacebook,
        hero: Hero
    }
}, {
    name: 'videos-twitter',
    path: '/videos/twitter',
    components: {
        default: VideosTwitter,
        hero: Hero
    }
}, {
    name: 'test',
    path: '/test',
    component: test
}]

export default new Router({
    mode: 'history',
    routes
})

我正在使用Vue 2，Vue-Router 2和webpack babel es2015预设 .

这很奇怪，因为当我使用Vue Devtools时，在我的App组件中，我可以看到路径对象 . 在site.dev/videos：

Vue Devtools screenshot

最后，如果我尝试记录 this.$router ，我会得到像 {name: null, meta: {…}, path: "/", hash: "", query: {…}, …} 这样的空路线......

Here有人说不使用es6风格的功能，但它确实不知道如何做到这一点 .

webpack ecmascript-6 vue.js vuejs2 vue-router