Añadimos Router con .to.path.params.back
This commit is contained in:
27
sw.js
27
sw.js
@@ -1,4 +1,3 @@
|
|||||||
|
|
||||||
const isFunction = (value) => typeof value === 'function';
|
const isFunction = (value) => typeof value === 'function';
|
||||||
const isNode = (value) => value instanceof Node;
|
const isNode = (value) => value instanceof Node;
|
||||||
|
|
||||||
@@ -281,25 +280,29 @@ export const Transition = ({ enter, idle, leave }, { children: [child] }) => {
|
|||||||
|
|
||||||
// --- Routing & Application Entry ---
|
// --- Routing & Application Entry ---
|
||||||
export const Router = (routes) => {
|
export const Router = (routes) => {
|
||||||
const currentPath = signal(window.location.hash.slice(1) || '/');
|
const path = signal(window.location.hash.slice(1) || '/'), params = signal({});
|
||||||
window.onhashchange = () => currentPath.value = window.location.hash.slice(1) || '/';
|
Router.path = path;
|
||||||
|
Router.params = params;
|
||||||
|
Router.to = (p) => window.location.hash = p;
|
||||||
|
Router.back = () => window.history.back();
|
||||||
|
window.onhashchange = () => path.value = window.location.hash.slice(1) || '/';
|
||||||
return h('div', { class: 'router-view' }, () => {
|
return h('div', { class: 'router-view' }, () => {
|
||||||
const pathValue = currentPath.value;
|
const cur = path.value;
|
||||||
for (const route of routes) {
|
for (const r of routes) {
|
||||||
const pattern = new RegExp(`^${route.path.replace(/:[^\s/]+/g, '([^/]+)')}$`);
|
const match = cur.match(new RegExp(`^${r.path.replace(/:[^\s/]+/g, '([^/]+)')}$`));
|
||||||
const match = pathValue.match(pattern);
|
|
||||||
if (match) {
|
if (match) {
|
||||||
const params = {};
|
const p = {};
|
||||||
const keys = route.path.match(/:[^\s/]+/g) || [];
|
(r.path.match(/:[^\s/]+/g) || []).forEach((k, i) => p[k.slice(1)] = match[i + 1]);
|
||||||
keys.forEach((key, index) => params[key.slice(1)] = match[index + 1]);
|
untrack(() => params.value = p);
|
||||||
return h(route.component, { params, path: pathValue });
|
return h(r.component, { params: p, path: cur });
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
const fallback = routes.find(r => r.path === '*');
|
const fallback = routes.find(r => r.path === '*');
|
||||||
return fallback ? h(fallback.component) : '404';
|
return fallback ? h(fbk.component) : '404';
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
export const mount = (rootComponent, target, props = {}) => {
|
export const mount = (rootComponent, target, props = {}) => {
|
||||||
const destination = typeof target === 'string' ? document.querySelector(target) : target;
|
const destination = typeof target === 'string' ? document.querySelector(target) : target;
|
||||||
if (!destination) return;
|
if (!destination) return;
|
||||||
|
|||||||
Reference in New Issue
Block a user