Question

我正在使用Vue和Vue路由器创建一个单页应用程序，我遇到的问题是，一旦我单击了路由的第一级，我似乎就无法遍历嵌套的数据。

单击类别可以按预期方式路由到类别页面，但是项目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对象即可：

let person = list[indexPath.row]
cell.nameLabel?.text = "\(indexPath.row) \(person.firstName) \(person.lastName)"

或者，使用2.2中引入的beforeRouteUpdate导航防护：

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

路由嵌套数组后不渲染的Vue JS

1 个答案: