En primer lugar, verifiqué y el modo de historial está activado, invoco vue-router así:
const router = new Router({ mode: 'history', base: process.env.BASE_URL, routes: routes, }); La ruta actual en la que estoy es /page/item/8 , y estoy redirigiendo a /page/item/9 . Actualmente, la URL cambia, pero la página no se vuelve a mostrar, dejándome en la misma vista que tenía antes.
Esta redirección se hace así:
this.$router.push({ name: 'PageItem', params: { itemId: '9' }}).catch(err => { // Stop Vue.router throwing an error if a user clicks on a notification with the same route. if (err.name !== 'NavigationDuplicated') { this.$logger.debug.log(err); } });La ruta en cuestión así:
import PageWrapper from '@/layouts/PageWrapper'; export default [ { path: '/page', name: 'page', component: PageWrapper, children: [ ... Other Routes ... { component: () => import(/* webpackChunkName: "page-item" */'@/pages/PageItem'), name: 'PageItem', path: '/item/:itemId/:view?', }, ], }, ];Cualquier idea, modifiqué el código para eliminar el código de identificación, así que pido disculpas si se ve un poco extraño.
Solo cambia el parámetro de ruta itemId . En esta situación, dado que se utilizan los mismos componentes de ruta antes y después de la transición, vue-router reutilizará los componentes de ruta existentes; no se destruyen y recrean. Entonces, si está cargando datos en los ganchos created o mounted del componente, no se volverán a llamar después de que cambie la ruta. En su lugar, debe usar beforeRouteUpdate o ver si hay cambios en $route .
Si desea forzar la destrucción y recreación del componente (no recomendado), debe key <router-view> en la ruta:
<router-view :key="$route.fullPath">Lea la guía de obtención de datos para obtener más información.