Использование vue-router программно - PullRequest
Новая
       12

Использование vue-router программно

0 голосов
/ 26 апреля 2018

У меня возникают проблемы при программном использовании vue-router.

Когда я использую <router-link> в своем HTML, это не проблема, но как только я пытаюсь использовать 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/>',
});

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>

Что я могу сделать, чтобы это работало?

Ответы [ 2 ]

0 голосов
/ 08 октября 2018

Вместо onclick вам нужно заменить его на @click или v-on:click, как показано ниже 

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

Вы также можете использовать тег href для перехода на нужную страницу. Как показано ниже 

<a href="/calculator-suite"><button>Test</button></a>
0 голосов
/ 26 апреля 2018

У вас проблема с слушателем события "click".Вы ожидаете значение, когда вы должны делать @click вместо :onClick, чтобы прослушать событие щелчка.

Подробнее о привязке: https://vuejs.org/v2/guide/forms.html#Basic-Usage

Подробнее об обработке событий: https://vuejs.org/v2/guide/events.html

...