Question

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

在我的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风格的功能，但听起来不是一个好的解决方案，我真的不知道该怎么做。

App.vue中未定义Vue $ route

0 个答案: