$router.push is not working in Vuejs

Asked

Viewed 770 times

3

Good evening, I’m starting my studies in web development and I chose Vuejs with Vuetify to begin with. Right away I’m not getting a page change by clicking on a button. I installed the Vue-router by NPM and created the file router.js with the following code:

import Vue from 'vue'
import Router from 'vue-router'
import App from './App.vue'
import Dashboard from  './Dashboard.vue'

Vue.use(Router)

export default new Router({
mode: 'history',
routes: [
  {
    path: '/',
    name: 'App',
    component: App
  },
  {
    path: '/dashboard',
    name: 'Dashboard',
    component: Dashboard
  }
]
})

Then I imported this file into main.js:

new Vue({router,vuetify,render: h => h(App)}).$mount('#app')

On the button I put the following code:

@click="$router.push('/dashboard')"

When you click the button, the URL address is changed correctly, but the page does not change to the Dashboard component. On the console, no error is shown. I searched but could not figure out the problem. Could anyone help me?

vue.js vuetify vue-router

  • Have you tried: <v-btn to="/dashboard">DASHBOARD</v-btn> ?

  • If none of the options work, try: this.$router.replace('/dashboard')

1 answer

0

To navigate between pages you have several options:

1) Using router-link:

// Hardcoded Link
<router-link to="/dashboard">Go to Dashboard</router-link>

// Usando nome da rota
<router-link :to="{name: 'Dashboard'}">Go to Dashboard</router-link>

2) Programmatic navigation:

// literal string path
this.$router.push('dashboard')

// object
this.$router.push({ path: 'Dashboard' })

Finally don’t forget to use router-view in the input component, in this case probably in App.vue

// App.vue

<div>
 <router-view></router-view>
</div>

Browser other questions tagged vue.js vuetify vue-router

You are not signed in. Login or sign up in order to post.