HelloWorld.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" }
];
main.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;
// }
}
}
);I want to reset the router-link id. the issue is like, When I click on router-link, in the URL section, I can see pathname/component name followed by id.
When I click on the back button every time I can see my action like:
/1../2 .../3
In the URL section. I want to reset the value when clicking on the back button. and on page refresh array from v-for is getting cleared.
Working code:- https://codesandbox.io/s/autumn-cherry-p5s9b?file=/src/main.js
The problem with your code is that you did not use history mode for the router, I highly recommend this mode because it resets the router, you cannot do anything about it in the helloworld vue, you have to go to your router file and add/change this code:
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes,
});
I hope this will work for you, this will also remove the # in your route.
If this still does not work, you can try creating a new vue project with the router set to history mode.
I implemented and tested the functionality that you need.
The Requested Solution
<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>
When the back button is clicked the URL is refreshed.
My Recommended Solution
Use the replace property of the router-link component Here
Setting replace prop will call router.replace() instead of router.push() when clicked, so the navigation will not leave a history record.
When the history is not recorded, no need for the back button event listening.