“ TypeError：无法读取vuetify中的属性'$ router'为null”

Question

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

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

这是我的代码：

ProductDetailsCard.vue

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

路由器> 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>