如何在 vuetify 中单击按钮导航到另一个页面？答案

【问题标题】：How to navigate to another page on button click in vuetify?如何在 vuetify 中单击按钮导航到另一个页面？
【发布时间】：2020-05-21 11:44:38
【问题描述】：

单击 vuetify 中的按钮后，我试图导航到另一个页面，但无法做到。单击下一页按钮后，它应该导航到新页面。

这是按钮所在的网址：

http://localhost:8080/viewer/?id_product=548

这是我的代码：

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({
    mode: 'history',
    base: process.eventNames.BASE_URL,
    routes: [
        {
            path: '/newpage',
            name: 'newpage',
            component: NewPage
        }
    ]
})

谁能帮帮我？

【问题讨论】：

标签： javascript typescript vue.js prestashop vuetify.js

【解决方案1】：

Vuetify 按钮支持to 属性

<v-btn to="/newpage">Next Page</v-btn>

但是你的问题在不同的地方，使用不带引号的组件，作为组件类的引用，而不是字符串值。

component: NewPage

【讨论】：

修正引号后的当前消息是什么？
没有消息。单击按钮后没有任何反应。
/newpage url 如果直接输入到浏览器是否有效？
否，/newpage url 如果直接输入到浏览器中将不起作用。
所以，这就是您需要开始的地方。按钮本身是正确的，你的路由坏了，但我猜不出是怎么回事。

【解决方案2】：

您的路线已命名，因此我建议使用它来称呼它的名称：

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

【讨论】：

【解决方案3】：

我认为你应该在 App.vue 和 index.js 中进行更改：

对于 App.vue：添加这些：<Newpage/> 和 import Newpage from'@/components/Newpage'

对于 index.js：import Newpage from '../components/Newpage.vue'and { path: '/newpage', name: 'Newpage', component: Newpage }

最后在你想要的地方使用这个<v-btn to="/newpage">Next Page</v-btn>！

希望这些对你有帮助！ :)

【讨论】：