Запретить изменение маршрута, если проверка поля ввода не удалась

Question

Запретить изменение маршрута, если проверка поля ввода не удалась

1

Я использую VueRouter, чтобы сделать одностраничное приложение и VeeValidate для проверки. Я хочу добавить метод, который проверяет состояние действительных входов на странице, чтобы определить, следует ли продвигаться вперед.

Вход будет выглядеть следующим образом:

<input 
  type="text"
  class="ze-input"
  placeholder="Enter mobile number"
  v-validate="'required'" 
  :class="{'input': true, 'is-danger': errors.has('mobile number') }" 
  name="mobile number"
>

Я использую router-link для продвижения с маршрутизатором:

<router-link to="send_to_hospital" class="col-sm-12 navigation ze-button">
  Next
</router-link>

Как я могу проверить страницу при щелчке router-link на router-link и остановить прогрессирование, если проверка не выполнена?

Мой файл конфигурации маршрутизации:

import Vue from 'vue'
import Router from 'vue-router'
import HowCanWeHelpYou from '@/components/how_can_we_help_you'
import AboutSelf from '@/components/about_self'
import AppointmentInfo from '@/components/appointment_info'
import ContactUs from '@/components/contact_us'
import SendToHospital from '@/components/send_to_hospital'
import Confirmed from '@/components/confirmed'

import VeeValidate from 'vee-validate'
import vmodal from 'vue-js-modal'

Vue.use(VeeValidate)
Vue.use(vmodal)

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: '/',
      component: HowCanWeHelpYou
    },
    {
      path: '/about_self',
      name: 'about_self',
      component: AboutSelf
    },
    {
      path: '/appointment_info',
      name: 'appointment_info',
      component: AppointmentInfo
    },
    {
      path: '/contact_us',
      name: 'contact_us',
      component: ContactUs
    },
    {
      path: '/send_to_hospital',
      name: 'send_to_hospital',
      component: SendToHospital
    },
    {
      path: '/confirmed',
      name: 'confirmed',
      component: Confirmed
    }
  ]
})

Morphasis 12 июнь 2017, в 23:32

Источник

Теги:

javascript

vue.js

vue-router

vuejs2

validation

1 ответ

Ещё вопросы

thanksd · Accepted Answer · 2017-06-12T19-56-00.000Z

Vue Router позволяет вам устанавливать навигационные охранники в нескольких разных местах. Эти защитники являются перехватами, в которых вы можете проверять поля при изменении маршрута, а затем предотвращать изменение, если какие-либо поля недействительны.

Вероятно, было бы наиболее целесообразно добавить beforeRouteLeave к компоненту, который содержит поля:

beforeRouteLeave(to, from, next) {
  // Tells VeeValidate to validate all the fields in the component scope
  this.$validator.validateAll(); 

  if (!this.errors.any()) { // if there are no errors
    next(); // go to the next route
  }

  // otherwise, next() doesn't get called and the route doesn't change
}

Спасибо, чувак, это сработало отлично