VueRouter this.$route undefined

Question

Mostly new at frontend, definitely new at Vue. I'm trying to read query parameters from the URL. Following How can I get query parameters from a URL in Vue.js? and https://router.vuejs.org/guide/#javascript

I now have this code:

<!doctype html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-router/dist/vue-router.js"></script>
</head>

<body>

<div id="app">
    {{message}}
</div>


<script>
const routes = [];

var router = new VueRouter({
    routes
});

var vm = new Vue({
    el: '#app',
    router,
    data: {
        message: this.$route.query
    }
});
</script>

</body>

</html>

However, running it in Chrome or Firefox yields an "cannot read property of 'query' of undefined"

Defining routes and creating links to them and loading them, as also described in that VueRouter guide works. So it looks like the VueRouter is loaded?

What am I doing wrong?

score 5 · Accepted Answer · answered Mar 28 '20 at 11:00

The rendering speed of the vue-router might be the issue. You can try assigning the value in any of the Vue life cycle hooks

var vm = new Vue({
    el: '#app',
    router,
    data: {
        message: null
    },
    created(){
        this.message = this.$route;
    }
});

VueRouter this.$route undefined

1 Answers1