I am trying to navigate to another page after clicking a button in vuetify but unable to do it. After clicking the Next Page button it should navigate to newpage.

This is the url where the button is:

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

Here is my code:

ProductDetailsCard.vue

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

router > index.js

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

Vue.use(Router)

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

Can anyone help me?

I am trying to navigate to another page after clicking a button in vuetify but unable to do it. After clicking the Next Page button it should navigate to newpage.

This is the url where the button is:

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

Here is my code:

ProductDetailsCard.vue

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

router > index.js

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

Vue.use(Router)

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

Can anyone help me?

• javascript
• typescript
• vue.js
• prestashop
• vuetify.js

3 Answers 3

Vuetify button supports to attribute

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

But you problem is in diffrent place, use ponent without quotes, as reference to ponent class, not string value.

ponent: NewPage

your route is named, so I remend use it calling its name:

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

I think you should make changes in App.vue and index.js:

for App.vue: add these: <Newpage/> and import Newpage from'@/ponents/Newpage'

for index.js: import Newpage from '../ponents/Newpage.vue'and { path: '/newpage', name: 'Newpage', ponent: Newpage }

and finally use this <v-btn to="/newpage">Next Page</v-btn> where you want!

I hope these help you! :)