Я использую 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
}
]
})
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
}