Dynamic Routes

Dynamic Routes

Dynamic Routes, Route Parameters and Props

A segment that starts with a colon is a parameter: /books/:id/ matches /books/3/ and captures id. Matching uses the path-to-regexp library (6.3.0 in Framework7 9.1.3 572,986 ), so :tab? makes a segment optional and BookNest's :id(\\d+) accepts digits only (Nested, Default and 404 Routes shows /books/abc/ falling through). Captured values are strings, and they reach a page component both in its props argument and in $f7route.params:

The script block of src/pages/book.f7HTMLLive

<script>
  export default (props, { $store, $f7route }) => {
    const book = $store.getters.books.value.find((b) => b.id === Number(props.id));
    const price = book ? '$' + book.price.toFixed(2) : '';
    const query = JSON.stringify($f7route.query);
    console.log(`book.f7 props=${JSON.stringify(props)} query=${query}`);
    return $render;
  };
</script>

Without Number(), the lookup compares "3" with 3 and finds nothing. The template puts the genre in the navbar and the book in a block and a list, with a back link whose Catalog label the if-not-md class hides on Material:

The catalog, a detail page on the iOS theme, and a detail page opened with props on the Material theme

Any number matches :id, so /books/99/ reaches this page too, not the 404 route. The template therefore checks book and renders "No book has the id 99." when the lookup fails.

MENU