Vue JS после маршрутизации вложенного массива не рендеринга

Question

Я создаю одностраничное приложение с использованием Vue и Vue Router, проблема, с которой я сталкиваюсь, заключается в том, что, как только я нажимаю на первом уровне маршрутизации, я не могу перебрать вложенные данные.

При щелчке маршрутов категории к странице категории, как и ожидалось, но в цикле v-for проектов ничего не появляется, и у меня нет ошибок в консоли, из-за которых я отключаюсь, поэтому я как бы крутлю свои колеса в эта точка. Любая помощь будет безумно признательна.

//Router
const projectCategoryPage = {
  props: ['projectCategory', 'id'],
  template: `
    <div class="container">
        <div>
            <div>
                <h2>
                <router-link :to="{name: 'Home'}">{{id}}</router-link>
                </h2>
                <div class="projectsWrapper">
                    <project-comp v-for="project in id.projects" v-bind:project="project"/>
                </div>
            </div>
        </div>
     </div>
  `
}

const projectSpecificPage = {
  props: ['project', 'id'],
  template: `
      <div class="container">
          {{id}}
      </div>
  `
}

const homePage = {
  props: ['projectCategories'],
  template: `
    <div class="container">
        <div>
            <div v-for="projectCategory in projectCategories">
                <h2>
                    <router-link :to="{name: 'project', params: {id: projectCategory.category}}">{{projectCategory.category}}</router-link>
                </h2>
                <div class="projectsWrapper">
                    <project-comp v-for="project in projectCategory.projects.slice(0,3)" v-bind:project="project"/>
                </div>
            </div>
        </div>
    </div>
    `
}


const routes = [{
    path: '/',
    name: 'Home',
    component: homePage
  },
  {
    path: '/project/:id',
    name: 'project',
    component: projectCategoryPage,
    props: true,

  }
]

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

// Individual Components
Vue.component('project-comp', {
  props: ['project'],
  filters: {

  },
  methods: {

  },
  template: `
    <div class="projectItem">
        <div class="imgWrapper">
            <img src="{{project.img}}" />
        </div>
        {{project.name}}
    </div>
  `
});


//App

const app = new Vue({
  el: '#app',
  router,
  data: {
    projectCategories: [{
        category: 'category1',
        projects: [{
          name: 'Project 1',
          img: 'images/img1.jpg'
        }, {
          name: 'Project 2',
          img: 'images/img2.jpg'
        }, {
          name: 'Project 3',
          img: 'images/img3.jpg'
        }, {
          name: 'Project 4',
          img: 'images/img4.jpg'
        }, {
          name: 'Project 5',
          img: 'images/img5.jpg'
        }, {
          name: 'Project 6',
          img: 'images/img6.jpg'
        }, {
          name: 'Project 7',
          img: 'images/img7.jpg'
        }]
      },
      {
        category: 'category2',
        projects: [{
          name: 'Project 1 cat2',
          img: 'images/img1.jpg'
        }, {
          name: 'Project 2',
          img: 'images/img2.jpg'
        }, {
          name: 'Project 3',
          img: 'images/img3.jpg'
        }, {
          name: 'Project 4',
          img: 'images/img4.jpg'
        }, {
          name: 'Project 5',
          img: 'images/img5.jpg'
        }, {
          name: 'Project 6',
          img: 'images/img6.jpg'
        }, {
          name: 'Project 7',
          img: 'images/img7.jpg'
        }]
      },
      {
        category: 'category3',
        projects: [{
          name: 'Project 1',
          img: 'images/img1.jpg'
        }, {
          name: 'Project 2',
          img: 'images/img2.jpg'
        }, {
          name: 'Project 3',
          img: 'images/img3.jpg'
        }, {
          name: 'Project 4',
          img: 'images/img4.jpg'
        }, {
          name: 'Project 5',
          img: 'images/img5.jpg'
        }, {
          name: 'Project 6',
          img: 'images/img6.jpg'
        }, {
          name: 'Project 7',
          img: 'images/img7.jpg'
        }]
      }
    ]
  },
  template: `
      <router-view v-bind:projectCategories="projectCategories"/>
  `
})

Answer 1

Vue Router - динамическое сопоставление маршрутов

При использовании маршрутов с параметрами следует обратить внимание на то, что когда пользователь перемещается из / user / foo в / user / bar, один и тот же экземпляр компонента будет использоваться повторно. Поскольку оба маршрута отображают один и тот же компонент, это более эффективно, чем уничтожение старого экземпляра и создание нового. Однако это также означает, что перехватчики жизненного цикла компонента не будут вызываться.

Чтобы реагировать на изменения параметров в том же компоненте, вы можете просто наблюдать объект $ route:

const User = {
  template: '...',
  watch: {
    '$route' (to, from) {
      // react to route changes...
    }
  }
}

Или используйте навигационную защиту beforeRouteUpdate, представленную в 2.2:

const User = {
  template: '...',
  beforeRouteUpdate (to, from, next) {
    // react to route changes...
    // don't forget to call next()
  }
}