Using vue-router programmatically

Question

I'm having issues when trying to use vue-router programatically.

When I use <router-link> in my HTML it works no problem but as soon as I try to use this.$router.push I have no luck. Below is a minimum viable snippet.

main.js

import Vue from 'vue';

import App from './App';
import router from './router';

Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
});

router index.js

import Vue from 'vue';
import Router from 'vue-router';

// Pages
import Home from '@/components/pages/Home';
import CalculatorSuite from '@/components/pages/calculator-suite/CalculatorSuite';

Vue.use(Router);

export default new Router({
  routes: [
    { path: '/', name: 'Home', component: Home },
    { path: '/calculator-suite', component: CalculatorSuite},
  ],
});

App.vue

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
};
</script>

Home.Vue

<template>
  <div class="home-parent">
    // Works 
    <router-link to="/calculator-suite">Test</router-link>
    //Doesn't work
    <button :onClick="change">Test</button>
  </div>
</template>

<script>
export default {
  name: 'Home',
  methods: {
    change() {
      // Do stuff before changing
      this.$router.push('/calculator-suite');
    },
  },
};
</script>

What can I do to allow this to work?

Fixed it. :onClick was not working on the button. @click works. — Sisky
– Sisky, Commented Apr 26, 2018 at 5:41

tony19 · Accepted Answer · 2022-07-14 23:59:06Z

3

You have a problem on the listener of "click" event. You are biding a value when you should be doing @click instead of :onClick to listen to the click event.

More info about binding: https://v2.vuejs.org/v2/guide/forms.html#Basic-Usage

More info about event handling: https://v2.vuejs.org/v2/guide/events.html

edited Jul 14, 2022 at 23:59

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Apr 26, 2018 at 9:34

TFC

1517 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Bhaskararao Gummidi · Accepted Answer · 2018-10-08 10:41:20Z

3

Instead of onclick you need to replace it with @click or v-on:click like as below

<button @click="change">Test</button> // shorthand 
                  or
<button v-on:click="change">Test</button>

You can also use href tag to go to desired page.like as below

<a href="/calculator-suite"><button>Test</button></a>

answered Oct 8, 2018 at 10:41

Bhaskararao Gummidi

2,5931 gold badge14 silver badges15 bronze badges

Collectives™ on Stack Overflow

Using vue-router programmatically

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related