ReferenceError: Can't find variable: $route

… not so much a bug as a support request I imagine.

I am just getting started with Vue.js. I’m trying to follow the tutorial here: https://scotch.io/tutorials/build-a-single-page-time-tracking-app-with-vue-js-part-ii. It is written for the 1.x version of vue and vue-router, so I have to figure out what’s different as I go along.

I’ve gotten so far that I have a router with paths (‘/home’ and ‘/time-entries’), and components for each of them rendered in <router-view></router-view> in the main App.vue component. When I navigate to ‘/time-entries’, the console shows this error:

ReferenceError: Can't find variable: $route

The TimeEntries.vue component for this path is:

<template>
  <router-link
    class="btn btn-primary"
    v-if="$route.path !== '/time-entries/log-time'"
  >
  Log Time
  </router-link>
</template>

Does anyone have an idea of why $route is not available for binding in my TimeEntries component? Or what it should be changed to?

I realize I’m not giving you much to go on, but since I’m new to this, I’m not sure what other files / output would be relevant. Please let me know what else you’d like to see. I’d appreciate any helpful advice! (Especially: could someone point me in the direction of some debugging techniques/tools when using the vue-cli scaffolding?)

thanks!

[jesselawson]

This is super old, but since I arrived here I would imagine someone else from 2016’s future will arrive here as well.

The key is to use this.$route.whatever, and not just $route.

That is all. Back to 2024 for me.

[zaceno]

Great tip! Thanks again