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:
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.