Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

When backing, there is a second mounted BUG on the root router

Aperta
  • Qualcosa non va?
#4,376 1 commento 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
38/100
Tipo di issue
Bug
Chiarezza
Da chiarire
Stato di attività
Tranquilla
Stack tecnologico
javascript
Ambito
mobile

Direzione di ricerca

Inizia con il flusso fornito di getRouter e back, quindi analizza il comportamento del ciclo di vita del router Framework7 Vue in relazione a router.back(1, { animate: true, reload: false }). Riproducilo in Chrome con Framework7 9.0.0 e Vue 3.4.4 e determina se il mount del router root viene effettivamente rieseguito; il lavoro è completato quando sono disponibili una riproduzione minima e una causa confermata oppure un comportamento previsto documentato.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

  • Framework7 version: V9.0.0
  • Vue.js version: V3.4.4
  • Platform and Target: Chrome browser
Describe the bug

I have encapsulated a ROUTE jump logic for global use, with the following JS content. But I encountered a problem in execution. When I advanced more than 2 pages, I called the back method without passing any parameters. Taking a step back would cause the root router/mounted method to be re executed. I have been debugging for a long time and still don't know why this happened. I have also looked at the official code. Please help me find out what caused the root node to be mounted again. Thank you!

To Reproduce

import UTILS from "./utils";
import { f7 } from 'framework7-vue';

function getRouter() {
let router = null;
if (window && window.document) {
const mainViewEl = document.querySelector('#framework7-root .view-main');
if (mainViewEl && mainViewEl.f7View) {
router = mainViewEl.f7View.router;
console.log("get route from dom!");
}
}
if (!router && f7) {
try {
const currentView = f7.views?.current || f7.instance?.currentView;
if (currentView) {
router = currentView.router;
console.log("get route from router!");
}
} catch (e) {
console.warn('[F7 Router] Fallback to f7 instance failed: ', e);
}
}
return router;
}

function getRoute() {
const router = getRouter();
let route = { path: '', query: {}, url: '' };
if (router) {
if (router.currentRoute) {
route = router.currentRoute;
}
}
return route;
}

function getCurrentPath() {
const route = getRoute();
let path = '';
if (route) {
path = route.path;
}
return path;
}

export default {
open(link, params) {
const router = getRouter();
if (!router) {
console.warn('[F7 Router] Router instance not initialized, cannot navigate');
return;
}
let toPath = '';
let toParams = {};
if (UTILS.isString(link) && link) {
toPath = link;
toParams = params || {};
} else if (UTILS.isObject(link) && link.url) {
toPath = link.url;
toParams = link.params || link.param || {};
} else {
console.warn('[F7 Router] no router link offered!');
return;
}
const url = UTILS.url.make(toPath, { d: JSON.stringify(toParams) });
router.navigate(url, { animate: true, preventDuplicate: true });
},

back(params) {
console.log("exec back begin...");
const router = getRouter();
if (!router) {
console.warn('[F7 Router] Router instance not initialized, cannot go back');
return;
}
const historyLen = router.history?.length || 0;
if (historyLen <= 1) {
console.log('[F7 Router] 无历史页面可回退，禁止操作');
return;
}
const currentPath = getCurrentPath();
if (currentPath === '/') {
console.log('[F7 Router] Current path is root /, back is forbidden');
return;
}
const backOptions = { animate: true, reload: false };
console.log("run back logic", backOptions);
if (UTILS.isNil(params)) {
router.back(1, backOptions);
} else {
backOptions.state = { d: JSON.stringify(params) };
router.back(1, backOptions);
}

console.log("run back logic finish", backOptions);

},

refresh() {
const router = getRouter();
if (router) {
router.refreshPage();
}
},

getParam(name, defValue) {
const allParams = this.getParams();
return UTILS.isNil(allParams[name]) ? defValue : allParams[name];
},

getParams() {
const route = getRoute();
if (route.pageParams) {
return Object.assign({}, route.pageParams);
}

const query = route.query || {};
if (UTILS.isNil(query.d)) {
  route.pageParams = {};
  return {};
}
try {
  const data = UTILS.url.param.decode(query.d);
  const pageParams = JSON.parse(data) || {};
  route.pageParams = pageParams;
  return Object.assign({}, pageParams);
} catch (e) {
  console.error('[F7 Router] Parameter parsing failed: ', e);
  route.pageParams = {};
  return {};
}

}
};

Lingua principale
JavaScript
Stelle
18.8k
Fork
3.2k
Nessuna PR unita negli ultimi 30g

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di framework7io/framework7

Tutte le issue di framework7io/framework7

Issue simili

Altre issue su JavaScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.