"TypeError: Cannot read property '$router' of null" in vuetify

Question

I am trying to navigate to another page after clicking a button in vuetify but unable to do it. In the console it shows this error:

"TypeError: Cannot read property '$router' of null"

This is my code:

ProductDetailsCard.vue

<v-btn @click="this.$router.push({path: '/newpage'})">Next Page</v-btn>

This is my whole ProductDetailsCard.vue page https://wetransfer.com/downloads/775193b11b70a8cd03372db08ee5a56a20200522072851/4d93e3

router > index.js

import Vue from 'vue';
import Router from 'vue-router';
import NewPage from '../components/NewPage.vue';

Vue.use(Router)

export default new Router({
    base: process.eventNames.BASE_URL,
    routes: [
         {
            path: '/newpage',
            name: 'newpage',
            component: NewPage
        } 
    ]
})

If I change the code like this:

ProductDetailsCard.vue

<v-btn @click="NewPage">Next Page</v-btn>
.....
NewPage ( ) {
        this.$router.push({ path: '/newpage'});
}

Then it shows this error in the console:

"TypeError: Cannot read property 'push' of undefined"

Can anyone help?

Answer 1

Just write $router.push, this is for reference the vue component inside script.

<v-btn @click="$router.push({path: '/newpage'})">Next Page</v-btn>