Vue router changing the url but not the content

Question

In Songs component I have a list of other albums, so whenever I click on one it should redirect me on /songs/:id. Each album has it's own id.

This is working from Home or any other component, but whenever I try to go from for example /songs/1 to /songs/2, it doesn't work. The URL changes but the webpage stays the same.

Here is my router index.js file.

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/songs/:id',
    name: 'Songs',
    component: () => import('../views/Songs.vue')
  },
  {
    path: '/videos/:title/:index',
    name: 'Videos',
    component: () => import('../views/Videos.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  routes
})

export default router

I was googling a little but nothing seems to work for me.

Answer 1

1. Import your song.vue in index.js

import Songs from '../views/Songs.vue'

2. Check your ../views/Songs.vue

yourlocalhost.url/mainapp/songs/1

Where '1' is a parameter named 'id' (url like /song/:id), try with:

this.$route.params.id