2016-12-02 10 views
1

Я работаю над собственным инструментом для стека (приложение для одной страницы). Я сейчас думаю о механизме маршрутизатора - У меня есть сомнения, если я должен идти с хэш (#) на основе маршрутизатора, или думать о чем-то другом:Альтернативная одиночная страница Маршрутизация приложения без хеша или регулярного выражения

  1. Использование window.history API - щебет уже делают некоторый небольшой SPA помощника: Реализация pushState для twitter.com (https://blog.twitter.com/2012/implementing-pushstate-for-twittercom) - не знаете, почему другие популярные (React, Angular) растровые маршрутизаторы не используют его и полагаются на механизм хэширования?

  2. Использование реализации хэш, но для повышения скорости отображения URL (и реализации) используют только один уровень вложенности маршрутов + Params, например:

    • #/posts,
    • #/post-new/,
    • #/post/<post-id>,
    • #/post-edit/<post-id>,
    • #/post-comments/<post-id>

т.д.

Так не комплекс регулярных выражений, после первого косого черты не всегда будут только один, очень описательным маршрут слизняк, и после второго слэша будут парами (или Титулы, такие как ?param1=X&param2=Y и т.д.). Любые изъяны такого (2-го) подхода?

EDIT:

Из-за повторяющиеся ответы - нет, я не хочу использовать существующие решения (угловой/реагирую/уголек и т.д.) - Я хочу осуществить это сам (я хочу построить инструмент для сам, не бороться с существующими API, который просто не подходит для меня)

+0

Вы можете использовать угловые или вы хотите развить свой собственный маршрут? – paolobasso

+0

_but для улучшения скорости отображения URL-адресов. Любая причина полагать, что это будет проблемой в первую очередь? – Timo

+0

нет, я не хочу использовать угловой (я обновил вопрос) – mrmnmly

ответ

2

Короткий ответ

единственные две возможности для хорошей маршрутизации внешнего интерфейса используется или реализации хэш-умолчанию history api в.

Длинный ответ

Вы можете использовать AngularJS и удалить # из URL, рассказывающих в угловую использовать API истории (tutorial):

angular.module('test', []). 
    config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) { 

    $locationProvider.html5Mode(true); 

    }]); 

и, возможно, вы будете нуждаться в вашей <head> :

<base href="/"> 

С $locationProvider.html5Mode(true); вы на самом деле говорите, что хотите использовать историю api.

«Не знаете, почему другие популярные (React, Angular) каркасные маршрутизаторы не используют его и полагаются на механизм хэш-функции?» Поскольку IE9 и предыдущие не поддерживают историю api, как вы можете видеть here.

Пример углового приложения, где нет # так html5Mode включена не Google Font

+3

есть также большая разница между хешами и реальными URL-адресами на стороне сервера, вы не можете просто «переключиться» на историю api без «реальных» URL-адресов, там, если вы не используете медленный хакерский 404-обработчик для маршрутизации. – dandavis

+1

@ paolo.basso99 спасибо за объяснение (особенно об отсутствии поддержки IE и 'html5mode') – mrmnmly