When backing, there is a second mounted BUG on the root router
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
Primeros pasos
- Lee el issue completo y luego la guía de contribución del proyecto.
- Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
- Haz un fork del repositorio y trabaja en una rama.
- Abre un pull request que haga referencia al número del issue.
Más de framework7io/framework7
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 68/100
framework7io/framework7#4365 · 1 comentario ·
-
propsHistory Abierto
Dificultad 2/5 1-3 horas Aptitud para principiantes 72/100
framework7io/framework7#4347 · 1 comentario ·
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 64/100
framework7io/framework7#4222 · 3 comentarios ·
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 65/100
framework7io/framework7#4175 · 1 comentario ·
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 65/100
framework7io/framework7#3969 · 3 comentarios ·
Todos los issues de framework7io/framework7
Issues similares
-
Dificultad 1/5 1-3 horas Aptitud para principiantes 78/100
Mintplex-Labs/anything-llm#6490 ·
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 86/100
-
[quality] workflow-scripts guard reads test:unit:coverage as skipping the unit suite, blocking #632 Abiertoagent/quality hive/hosted-available-lke648397-260827-5n31 quality testing
Dificultad 2/5 1-3 horas Aptitud para principiantes 86/100
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 72/100
-
area-clientside-dartpad
Dificultad 2/5 1-3 horas Aptitud para principiantes 62/100