Passing Data Between Pages

A page can receive data four ways. Route parameters and the query string live in the URL and survive a deep link; the props navigation option passes any JavaScript value without touching the URL. The catalog's Staff pick button uses all three:

The Staff pick handler in the script of src/pages/home.f7JavaScript

    const openPick = () => {
      $f7router.navigate(
        { name: 'book', params: { id: 5 }, query: { from: 'pick' } },
        { props: { badge: 'Staff pick' } },
      );
    };

The log in Defining and Navigating Routes ends with props={"id":"5","badge":"Staff pick"} query={"from":"pick"}: parameter and prop arrive merged, and book.f7 renders the badge as a chip. The router keeps props in router.propsHistory for Back, but not in the URL, so a shared link to /books/5/?from=pick shows no badge. Anything a link must reproduce belongs in params or the query.

The fourth way is the Store: the detail page looks the book up with $store.getters.books rather than receiving the object. Data flowing back, such as a rating the catalog should show, belongs there too, because the pages behind stay in the DOM and a getter updates them in place (Connecting the Store).

MENU

Passing Data Between Pages