Multifunctional JavaScript router solves the problem of routing your application, providing full control over the route.
const router = Pilot.create({
'#route-id': {
url: '/:type(/:detail)?', // route pattern
model: {
user: (req) => fetch(`/api/${req.params.type}`).then(r => r.json()),
},
onroute(/**Pilot.Request*/req) {
console.log(this.model.user);
}
}
});
// Запускаем перехват ссылок и history api
router.listenFrom(document, {autoStart: true});
// Где-то в коде
router.go('#route-id').then(() => ...);
router.getUrl('#route-id', {type: 'user'}); // '/user';
router.route.getUrl({type: 'user'}); // '/user';
router.route.getUrl({type: 'user', detail: 123}); // '/user/123';- create(stitemap:
Object):Pilot - URL([url:
string[, base:string]]) — see Native URL and- parse(url:
string) - toMatcher(pattern:
string|RegExp) #properties- protocol:
string - protocolSeparator:
string - credhost:
string - cred:
string - username:
string - password:
string - host:
string - hostname:
string - port:
string - origin:
string - path:
stringor pathname - segment1:
string - segment2:
string - search:
string - query:
object - params:
object - hash:
string
- protocol:
#methods- addToQuery(add:
object|string|null) - removeFromQuery(remove:
string[]) - setQuery(add:
object|string|null[, remove:string[])
- addToQuery(add:
- parse(url:
- queryString
- parse(value:
string):object - stringify(query:
object):string
- parse(value:
- req:
Pilot.Request
- req:
Pilot.Request - route:
Pilot.Route
- req:
Pilot.Request - route:
Pilot.Route - error:
Error
- req:
Pilot.Request - route:
Pilot.Route
List of all models
Current Request.
Active/Current URL.
Current route.
- id:
string— route id - params:
object— route parametrs (optional) - query:
object|inherit— route GET-query parametrs (optional)
- id:
string— route id - params:
object— route parameters (optional) - query:
object|inherit— route GET-query parameters (optional) - details:
object- route navigation details (options)
- url:
string - details:
object- route navigation details (options)
Emits beforereload and reload events. if a handler to beforereload returns false, does not
perform actual reload and returns a resolved promise instead.
Local models (inherit global models).
Protected method.
- params:
Object(optional) - query:
object|inherit— route GET-query parametrs (optional)
id:string — route id or space-separated list
const modelLoader = new Pilot.Loader({
user: ({params:{id}}) => fetch(`/api/user/${id}`).then(r => r.json()),
status: () => fetch(`/api/status`).then(r => r.json()),
}, {
// неважно сколько раз вызвать `fetch`,
// если уже есть запрос на сервер, новый не последует
persist: true,
// Обработку данных загруженной модели
processingModel(modelName, modelData, req, models) {
return {...modelData, pathed: true}; // or Promise
},
// Обработка ошибки при загрузки модели
processingModelError(modelName, error, req, models) {
return Promise.resolve({defaultData: 123}); // или undefined для reject
},
// Финальная обработка полученных данных
processing(req, models) {
return {...models, patched: true};
},
});
// Используем `modelLoader`
const router = Pilot.create({
model: modelLoader,
});
// Где-то в коде
modelLoader.fetch().then(model => {
console.log(model.user);
console.log(model.status);
});