Vue.JS - и «история», и «абстрактный» роутер? - PullRequest
Новая
       18

Vue.JS - и «история», и «абстрактный» роутер?

1 голос
/ 05 марта 2019

Я создаю приложение VueJS, в котором пользователь заполняет 5-ступенчатую форму.

Эти шаги направляются от /step-1 до /step-5 в Vue Router.Однако я хотел бы, чтобы сайт обновлялся на странице индекса (/) при обновлении страницы.

Я мог бы использовать режим abstract для этого - но страница результата генерируется из следующего URL: /result/:userid, в котором мне нужно, чтобы состояние было history, чтобы иметь возможность получить идентификатор пользователяс URL (а затем сделать запрос на сервер).

Я также хочу, чтобы этот URL-адрес был доступен даже после завершения формы, поэтому, к сожалению, абстракция здесь не подходит.

Итак, возможно ли использовать оба режима?Обновите страницу до index.html при обновлении страниц формы, но затем используйте режим history, чтобы отобразить результат?

Ответы [ 2 ]

1 голос
/ 05 марта 2019

Вы не можете сделать это.Это либо история , либо аннотация , но не оба.Сказав это, есть несколько вещей, которые вы можете сделать.

Подход 1: Используйте режим history с шагами в качестве параметров запроса

Так что вместо таких маршрутов, как /step-1 или /step-2, используйте затем как часть параметров запроса.Таким образом, у вас будут такие маршруты, как:

  • Индексный маршрут: example.com/?step=1, example.com/?step=2
  • Результат маршрута: example.com/result/:userId

Подход 2:Используйте режим abstract с компонентом более высокого порядка

Здесь у вас будет маршрутизатор с абстрактным интерфейсом, но он будет служить только в качестве маршрутизатора состояния и не поможет при любых манипуляциях с URL-адресами браузера.

Создайте компонент более высокого порядка, например AppComponent, где у вас будут собственные регулярные выражения для определения маршрута.Это будет выглядеть так: 

// Should match route /result/:userId
const IS_RESULT = new RegExp('/result/(\\d+)$');

// User RegExp groups
const IS_STEP = new RegExp('/step-(\\d+)$');

export default class AppComponent extends Vue {

    // Use Vue.js created hook
    created() {
        const path = window.location.pathname;

        // Top level routing of the application
        if (IS_STEP.test(path)) {
            // Do something. You are in step-1/step-2/etc.
        } if (IS_RESULT.test(path)) {
            // Do something. You are in /result/:userId

            // Get userId
            const groups = IS_RESULT.exec(path);
            const userId = groups[1];
        } else {
            // Goto Error page
            throw new Error('Unknown route');
        }
    }

}

Подход 3: Использовать многостраничный SPA

Здесь вы создадите двухстраничное приложение.Первое приложение будет иметь маршруты /step-1, /step-2 и т. Д. Для этого вы будете использовать режим abstract .Второе приложение будет иметь маршрут /result/:userId с режимом history .

В этой архитектуре, когда пользователь находится на step-5, вместо того, чтобы выдвигать новое состояние в маршрутизатор, вы будетеиспользуйте API истории HTML5, чтобы изменить маршрутизатор, а затем вызвать принудительное обновление страницы.Кроме того, есть и другие способы достижения этого.

0 голосов
/ 05 марта 2019

У вас может быть просто перенаправление в нативном javascript, где вы называете это window.location.href ('yourHomePage.com'), и он полностью обновится.

...