In-app navigation
If we use the address bar of the browser to navigate to the home page, http://vuebnb.test/
, it works because Laravel is now serving a page at this route. But, if we navigate to the home page from the listing page, there's no longer any page content:
Figure 7.13. Empty home page after navigating from listing page
We currently don't have any links to the listing page from the home page, but if we did, we'd experience a similar issue.
The reason is that our page components currently get their initial state from the data we've injected into the head of the document. If we navigate to a different page using Vue Router, which doesn't invoke a page refresh, the next page component will have the wrong initial state merged in.
We need to improve our architecture so that when a page is navigated to we check if the model injected into the head matches the current page. To facilitate this, we'll add a path
property to the model and check that it matches the active URL. If not, we'll use...