Feature Request: Auto-generate unique ID for each route instance

[huajiqaq]

Problem Description

Identical URL route instances cannot be distinguished, causing conflicts in cached states like scroll positions.

Desired Solution

The F7 Router should have built-in automatic unique ID generation for each route instance.

Suggested Implementation

// Route configuration support
routes: [{
  path: '/page',
  options: {
    routeId: true // Auto-generate
    // or
    routeId: (route) => customIdGenerator(route)
  }
}]

Current Workaround

// Currently only this hack works
nr.options.props = {
  ...props,
  get rid() {
    return `${Date.now()}_${Math.random().toString(36).slice(2)}`;
  }
};

Additional Issues (specific to hack method)

1. propsHistory Initialization Defect (hack-specific)

   • When using the hack method, the propsHistory array is empty on initial page load
   • The default implementation might work normally, but the hack method disrupts the normal initialization flow

2. propsHistory Home Return Issue (hack-specific)

   • When returning to the homepage using the hack method, propsHistory doesn't correctly record the homepage state
   • The default implementation might have handled this correctly, but the hack method requires additional fixes

I've created a comprehensive PR that implements automatic route ID generation and fixes related history management issues. Here's the complete implementation:
#4375

Explanation

These issues are specific to using the hack method (dynamically generating rid). In the default F7 Router implementation, these functions might already work normally. But to be compatible with the hack method, corresponding fix logic needs to be added to the code.

Expected Functionality

1. Automatically resolve cache conflicts for duplicate URLs
2. Simplify state management for scroll positions, etc.
3. No manual handling of route IDs required

Technical Detail:
I use f7-store to create and restore cache based on this id, but encounter problems during deletion. Currently can only use code similar to:

const propsHistory = f7?.views?.main?.router?.propsHistory;
if (!propsHistory) return;
const originalPop = propsHistory.pop;
propsHistory.pop = function () {
    const lastItem = this[this.length - 1];
    const rid = lastItem?.rid;
    const result = originalPop.apply(this, arguments);
    return result;
};

Is there a better method? Or can this be optimized by adding the built-in route ID functionality to avoid developers having to use such hack methods?