search

ben-miles / nomansguide

An unofficial second-screen companion app for the game "No Man's Sky."
https://nomansguide.dev
Other
3 stars 1 forks source link

Fix Browser History #29

Closed ben-miles closed 1 year ago

ben-miles commented 1 year ago

Something is a bit off about the browser history, or maybe the page titles that are getting saved in those browser history items... Clicking 'back', or long-pressing on 'back' and choosing a specific history item, seems to take you to the correct view -- But they have the wrong page title. For example:

  1. User goes directly to home view via root URL -- Long-press on back button shows only "new tab"
  2. User navigates to Items view -- Long-press on back button shows "Items", then "new tab" -- but the "Items" entry takes you back to home
  3. User navigates to "Activated Indium" -- Long-press on back button shows "Activated Indium", "Items", "new tab". Again, clicking any of these takes you back the appropriate number of steps, but the page titles shown seems to be getting overwritten each time a view loads.
ben-miles commented 1 year ago

Apparently this is a fairly common issue that arises from trying to implement dynamic page titles the way I have: by adding them to each route object in the router/index.js file, then using the navigation guard router.beforeEach() to grab that title from the route object and set it in the DOM. This implementation can cause an "off-by-one" error. See: https://github.com/vuejs/vue-router/issues/914#issuecomment-384477609

A quick workaround might be to use beforeEach() instead of afterEach(), but then the page title doesn't update til after the new route completes loading. That's a minor peeve, however...

BOTH of these implementations make it difficult to create page titles for nested paths, which reference some object being loaded into a parent view. For example, it's trivial to update the title of domain/parent to something like "Parent | Domain," but pretty tricky to get domain/parent/one-specific-child to derive a nice title like "One Specific Child | Domain". I'm currently pulling that off with a function that performs multiple operations on the child object ID and turns it into a prettier title, but it's not perfect.

TL;DR: This issue is wrapped up in #28 , and the best solution for me seems to be something like Vue-Meta, where I can define titles and other meta on each component, and have them override one another in a logical way.

ben-miles commented 1 year ago

Closed by 09d69f3