Хочу сделать пошаговою регистрацию с помощью Vue router. Но, не понимаю как можно реализовать задумку. На данный момент: Есть роуты:
const router = new VueRouter({
routes:[
{
path:'/login',
name:'login',
component: Userlogin
},
{
path:'/registration',
name:'register',
component:Usercheck,
},
{
path:'/store',
name:'store',
component:Userregister
}
]
})
const store = new Vuex.Store({
modules:{
login:{
state:{
phone: '',
password: '',
}
},
sendcode:{
state:{
phone: '',
}
},
registration:{
state:{
sms_code: '',
password: '',
password_confirmation: '',
},
}
},
})
Происходит все просто пользователь вводит номер телефона,жмет отправить, происходит аякс запрос который генерит код и заносит его в бд:
methods:{
sendcode: function() {
axios.post('/sms/send-code', {
phone:this.$store.state.sendcode.phone,
}).then((response) => {
this.$router.push('store')
}).catch(error => {
this.errors = error.response.data.errors;
});
}
}
После этого нужно вывести форму с соответствующими полями и отправить аякс запрос в БД на проверку кода и внос данных в бд. И вот что я не могу понять: как все сделать так , что если бы пользователь обновил страницу его кинуло сразу на форму проверки кода(если до этого он ее заполнял). ТО есть роут store должен открываться только в том случае, если пользователь вводил телефон в роуте registration. Сделать store дочерним элементом я не могу , потому что все рендерится в одном родительском компоненте:
<template>
<div>
<a @click="showModal = true">
Войти <i class="icon-user-outline blue" style="font-size:1rem"></i>
</a>
<vmodal v-show="showModal" @close="showModal = false" style="display:none" class="modal-signin">
<h3 slot="header" class="text-center">
{{ headerText }}
</h3>
<div slot="body" class="modal-signin__body padding-1">
<div class="grid-x grid-margin-x modal-signin__tabs margin-bottom-1">
<div class="cell small-6 margin-bottom-1">
<router-link class="modal-signin__tabs__tab" :to="{ name: 'login' }" active-class="active" >
<i class="icon icon-checked"></i> Я уже зарегистрирован
</router-link>
</div>
<div class="cell small-6 margin-bottom-1">
<router-link class="modal-signin__tabs__tab" :to="{ name: 'register' }" active-class="active">
<i class="icon icon-checked"></i> Я новый пользователь
</router-link>
</div>
</div>
<form class="modal-signin__form padding-vertical-1" v-on:submit.prevent>
<div class="grid-x grid-margin-x">
<router-view ref="action"></router-view>
</div>
<div class="modal-signin__footer padding-1 margin-top-1">
<div class="text-center margin-bottom-1" v-if="$route.path == '/registratioasdasdasn'">
* Нажимая кнопку “Зарегистрироваться”, я принимаю условия <a href="/page/privacy-policy" target="_blank" title="Соглашение об использовании интернет-сервиса">Соглашения об использовании интернет-сервиса</a>, <a href="/page/privacy-policy" target="_blank" title="Политика обработки персональных данных">Политики обработки персональных данных</a>, <a href="/page/privacy-policy" target="_blank" title="Согласие пользователя на использование персональных данных">Согласия пользователя</a>, включающего мое согласие на обработку ООО «Твоя Аптека РФ» моих персональных данных в соответствии с Федеральным законом от 27.07.2006 года № 152-ФЗ «О персональных данных»
</div>
<div class="text-center">
<button v-if="$route.path == '/login'" class="button text-uppercase" v-on:click="signin">
Войти на сайт
</button>
<button v-if="$route.path == '/registration'" class="button text-uppercase" v-on:click="sendcode">
Отправить код
</button>
<!--
<button type="submit" v-if="showForm.signup" class="button text-uppercase">
Зарегистрироваться
</button>
-->
</div>-
</div>
</form>
</div>
<div slot="footer"></div>
</vmodal>
</div>
</template>
<script>
export default {
data() {
return {
showModal: false,
}
},
computed: {
headerText: function() {
return 'Добро пожаловать!';
}
},
methods: {
signin(){
this.$refs.action.signin()
},
sendcode(){
this.$refs.action.sendcode()
}
}
}
Есть огромный плюс в том, что используется Vuex, поэтому особо про передачу данных можно не парится. Я не толком не прошу ответа на мой вопрос, а прошу совета, в какую сторону хотя бы смотреть, почитал документацию, ничего не понял.
Смотрите в сторону динамических путей. При их использовании можно сделать "под адрес", т.е. что то вида http://site.ru#registration/step-0
, http://site.ru#registration/step-1
, ... .
При этом открываться будет один и тот же компонент, а сам параметр ('step-0', 'step-1') можно получить в компоненте и в зависимости от него показывать html.
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Перевод документов на английский язык: Важность и ключевые аспекты
Какие существуют виды рекламных бордов и как выбрать подходящий?
Как понять, как стиль или правило применяется к картинке на сайте, с помощью которого она как бы тонируется, затемняетсяХочу убрать это