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

你的听众有问题＆＃34;点击＆＃34;事件。当您应该执行@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标记转到所需的页面，如下所示

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

以编程方式使用vue-router

2 个答案: