以编程方式使用 vue-router

Question

我在尝试以编程方式使用 vue-router 时遇到问题。

当我在 HTML 中使用 <router-link> 时，它没有问题，但是当我尝试使用 this.$router.push 时，我就没有运气了。以下是一个最小的可行代码段。

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/>',
});

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

我该怎么做才能让它发挥作用？

Answer 1

"click" 事件的侦听器有问题。当您应该执行 @click 而不是 :onClick 来收听点击事件时，您正在出价。

关于绑定的更多信息：https://vuejs.org/v2/guide/forms.html#Basic-Usage

有关事件处理的更多信息：https://vuejs.org/v2/guide/events.html

Answer 2

您需要将其替换为 @click 或 v-on:click 而不是 onclick，如下所示

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

您还可以使用 href 标签转到所需的 page.like，如下所示

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

以编程方式使用 vue-router

Using vue-router programmatically

vue.js

vue-router

vuejs2