路由嵌套数组后的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 - Dynamic Route Matching

在使用带参数的路由时需要注意的一点是，当用户从 /user/foo 导航到 /user/bar 时，将重复使用相同的组件实例。由于两条路由都渲染相同的组件，因此这比销毁旧实例然后创建新实例更有效。但是，这也意味着组件的生命周期钩子不会被调用。

要对同一组件中的参数变化做出反应，您可以简单地观察 $route 对象：

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

或者，使用 2.2 中引入的 beforeRouteUpdate 导航守卫：

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