typescript - vuetify 中的 "TypeError: Cannot read property ' $路由器 ' of null"

Question

在 vuetify 中单击按钮后，我试图导航到另一个页面，但无法执行此操作。在控制台中显示此错误:

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

这是我的代码:

ProductDetailsCard.vue

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

这是我的整个 ProductDetailsCard.vue 页面 https://wetransfer.com/downloads/775193b11b70a8cd03372db08ee5a56a20200522072851/4d93e3

路由器 > 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
        } 
    ]
})

如果我这样修改代码:

ProductDetailsCard.vue

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

然后它在控制台中显示这个错误:

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

有人能帮忙吗？

Answer 1

只写$router.push，this是为了引用脚本里面的vue组件。

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