2

I'm trying to get the name of the current route in my App.vue but all I get it's a null response.

In my App.vue:

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

In my ./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
})

I'm using Vue 2, Vue-Router 2 and webpack + babel es2015 presets.

It's weird because when I use the Vue Devtools, in my App component I can see the route object. On site.dev/videos:

Vue Devtools screenshot

And, finally, if I try to log this.$router I get an empty route like {name: null, meta: {…}, path: "/", hash: "", query: {…}, …}...

Here someone says to not use es6 style functions but it doesn't sound like a good solution and I don't really know how to do that.

Artwo
  • 21
  • 1

0 Answers0