Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

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

Abierto
#4,376 1 comentario 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
4/5
Tiempo estimado
3-5 días
Aptitud para principiantes
38/100
Tipo de issue
Error
Claridad
Necesita aclaración
Estado de actividad
Tranquilo
Stack tecnológico
javascript
Área
mobile

Línea de trabajo

Comienza con el flujo proporcionado de getRouter y back, y después inspecciona el comportamiento del ciclo de vida del router de Framework7 Vue en torno a router.back(1, { animate: true, reload: false }). Reprodúcelo en Chrome con Framework7 9.0.0 y Vue 3.4.4, y determina si el montaje del router raíz se ejecuta realmente de nuevo; se considera terminado cuando exista una reproducción mínima y una causa confirmada o un comportamiento esperado documentado.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

  • 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 {};
}

}
};

Lenguaje dominante
JavaScript
Estrellas
18.8k
Forks
3.2k
Métricas de merge de PR
Sin PR fusionados en 30 d

Guía de contribución

Abrir la guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de framework7io/framework7

Todos los issues de framework7io/framework7

Issues similares

Más issues de JavaScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.