0

Хочу сделать пошаговою регистрацию с помощью 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>, включающего мое согласие на обработку ООО &laquo;Твоя Аптека РФ&raquo; моих персональных данных в соответствии с Федеральным законом от 27.07.2006 года № 152-ФЗ &laquo;О персональных данных&raquo;
                    </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, поэтому особо про передачу данных можно не парится. Я не толком не прошу ответа на мой вопрос, а прошу совета, в какую сторону хотя бы смотреть, почитал документацию, ничего не понял.

1 ответ 1

1

Смотрите в сторону динамических путей. При их использовании можно сделать "под адрес", т.е. что то вида http://site.ru#registration/step-0, http://site.ru#registration/step-1, ... .

При этом открываться будет один и тот же компонент, а сам параметр ('step-0', 'step-1') можно получить в компоненте и в зависимости от него показывать html.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.