Vue router, пошаговая регистрация

259
09 июня 2018, 22:10

Хочу сделать пошаговою регистрацию с помощью 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, поэтому особо про передачу данных можно не парится. Я не толком не прошу ответа на мой вопрос, а прошу совета, в какую сторону хотя бы смотреть, почитал документацию, ничего не понял.

Answer 1

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

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

READ ALSO
Вывод сложного объекта через v-for

Вывод сложного объекта через v-for

Есть объект core_objectlanguage_code такого вида

162
Как получить кодировку страницы на NodeJS?

Как получить кодировку страницы на NodeJS?

Вопрос прост - как получить кодировку страницы?

162
Программное затемнение картинки

Программное затемнение картинки

Как понять, как стиль или правило применяется к картинке на сайте, с помощью которого она как бы тонируется, затемняетсяХочу убрать это

170