I am facing an issue while trying to execute a function that redirects the user to another page upon clicking a specific element. The problem arises when using:
this.$router.push({ name: 'matchlist', params: { summonerName: summonerName }})
It redirects to URL /summoner/username/, instead of /summoner/username. I have noticed that there is an extra backtick at the end of the URL, causing the issue. Interestingly, this problem does not occur when I am already on /summoner/username.
However, if I change the code to:
this.$router.push({ path: `/summoner/${summonerName}` })
It directs me to /summoner/username without any issues. I am still curious about the reason behind the appearance of the backtick in the first example.
Here is a snippet of the Routes:
{
path: '/summoner/:summonerName',
component: Summoner,
children: [
{ path: '', component: Matchlist, name: 'matchlist' },
{ path: 'match/:matchId', component: SpecificMatch, name: 'specificMatch' }
]
}
And the function causing the redirection:
redirectToProfile(participant){
let summonerName = participant.identity.player.summonerName
this.$router.push({ name: 'matchlist', params: { summonerName }})
//this.$router.push({ path: `/summoner/${summonerName}` })
},