<script> export default { name: 'TEST', data() { return { prevRoute: '' } }, methods: { goBack() { return this.$router.go(-1); }, }, beforeRouteEnter(to, from, next) { next(vm => { vm.prevRoute = from.name console.log(from.name) }) }, } </script> <template> <div> <button @click="goBack" class="back">{{ prevRoute }}</button> </div> </template>Vue router beforeRouteEnter: después de actualizar la página, el texto del botón {{prevRoute}} desaparece. ¿Qué otras formas hay de mostrar texto en el botón de la página anterior?
Eso no es posible en absoluto, su ruta from origen siempre estará vacía al actualizar. El mejor enfoque que puedo encontrar es almacenar su ruta from.name en su localStorage y configurar ese elemento solo si from.name existe
beforeRouteEnter(to, from, next) { if (from.name) localStorage.setItem('from_route', from.name) next() }, Luego, en su gancho montado, establezca el valor de prevRoute según el elemento localStorage
mounted () { this.from_route = localStorage.getItem('from_route') },Por supuesto, enfrentará el mismo problema si alguien le comparte un enlace y no proviene de ninguna otra página.