Маршрутизатор Vue изменяет URL, но не содержимое

#javascript #vue.js #vue-component #vue-router #vue-router4

#javascript #vue.js #vue-компонент #vue-router #vue-router4

Вопрос:

В компоненте Песни у меня есть список других альбомов, поэтому всякий раз, когда я нажимаю на один из них, он должен перенаправлять меня на /songs/:id . У каждого альбома есть свой собственный идентификатор.

Это работает из дома или любого другого компонента, но всякий раз, когда я пытаюсь перейти, например, из /songs/1 в /songs/2, это не работает. URL-адрес изменяется, но веб-страница остается прежней.

Вот мой маршрутизатор index.js досье.

 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
 

Я немного погуглил, но, похоже, у меня ничего не работает.

Ответ №1:

  1. Импортируйте свой song.vue index.js
 import Songs from '../views/Songs.vue'
 
  1. Проверьте ваш ../views/Songs.vue

yourlocalhost.url/mainapp/songs/1

Где ‘1’ — это параметр с именем ‘id’ (url, подобный /song/:id), попробуйте с:

this.$route.params.id