HolaMundo.vue
<template> <div> <b>Vuejs dynamic routing</b> <div v-for="item in items" :key="item.id"> <b>{{ item.id }}.</b> <router-link :to="{ name: 'UserWithID', params: { id: item.id } }"> {{ item.kk }} </router-link> </div> <br /><br /><br /> <User /> </div> </template> <script> import User from "./User.vue"; import { datalist } from "./datalist"; export default { name: "HelloWorld", components: { User, }, data() { return { items: datalist, }; }, }; </script>datalist.vue
export const datalist = [ { id: 1, val: "11", kk: "potter" }, { id: 2, val: "22", kk: "james" }, { id: 3, val: "55", kk: "limda" }, { id: 4, val: "77", kk: "stepen" } ];principal.js
import VueRouter from "vue-router"; import HelloWorld from "./components/HelloWorld.vue"; import Vuex from "vuex" import createPersistedState from "vuex-persistedstate"; Vue.use(VueRouter); const store = new Vuex.Store( { plugins: [createPersistedState({ storage: window.sessionStorage, })], state: { }, mutations: { // setAuthentication(state, status) { // state.authenticated = status; // } } } ); Quiero restablecer la identificación router-link . el problema es como, cuando hago clic en el enlace del enrutador, en la sección de URL, puedo ver el nombre de la ruta/nombre del componente seguido de la identificación.
Cuando hago clic en el botón Atrás cada vez que puedo ver mi acción como:
/1../2 .../3En la sección URL. Quiero restablecer el valor al hacer clic en el botón Atrás. y en la matriz de actualización de página de v-for se está borrando.
Código de trabajo: - https://codesandbox.io/s/autumn-cherry-p5s9b?file=/src/main.js
El problema con su código es que no usó el modo de historial para el enrutador, recomiendo este modo porque reinicia el enrutador, no puede hacer nada al respecto en helloworld vue, debe ir al archivo de su enrutador y agregar/ cambiar este código:
const router = createRouter({ history: createWebHistory(process.env.BASE_URL), routes, }); Espero que esto funcione para usted, esto también eliminará el # en su ruta.
Si esto aún no funciona, puede intentar crear un nuevo proyecto vue con el enrutador configurado en modo historial.
Implementé y probé la funcionalidad que necesitas.
La solución solicitada
<template> <div> <b>Vuejs dynamic routing</b> <div v-for="item in items" :key="item.id"> <b>{{ item.id }}.</b> <router-link :to="{ name: 'UserWithID', params: { id: item.id } }"> {{ item.kk }} </router-link> </div> <br /><br /><br /> <User /> </div> </template> <script> import * as $ from 'jquery' import User from './components/User.vue' export default { name: 'HelloWorld', components: { User }, data () { return { items: [ { id: 1, val: '11', kk: 'potter' }, { id: 2, val: '22', kk: 'james' }, { id: 3, val: '55', kk: 'limda' }, { id: 4, val: '77', kk: 'stepen' } ] } }, methods: { BackFunction () { console.log('back button clicked !') window.location.href = '/' }, RefreshFunction () { console.log('reload button clicked !') } }, mounted () { let BF = this.BackFunction $(window).on('popstate', function (e) { BF() }) let RF = this.RefreshFunction $(window).on('unload', function (e) { RF() }) }, beforeDestroy () { let BF = this.BackFunction $(window).off('popstate', function (e) { BF() }) let RF = this.RefreshFunction $(window).off('unload', function (e) { RF() }) } } </script>Cuando se hace clic en el botón Atrás, la URL se actualiza.
Mi solución recomendada
Use la propiedad de replace del componente router-link aquí
La configuración de replace prop llamará a router.replace() en lugar de router.push() cuando se haga clic, por lo que la navegación no dejará un registro de historial.
Cuando el historial no se graba, no es necesario escuchar el evento del botón Atrás.