Question 11: Consider the Vue application

1const Home = {
2  template: `<div> This is home <router-view /></div>`,
3}
4
5const NotFound = {
6  template: `<div>Not Found</div>`,
7}
8
9const Students = {
10  template: `<ul><li v-for='student in students'>{{student.name}}</li></ul>`,
11  data() {
12    return {
13      students: [
14        { id: 1, name: 'std1', course: 'mad1' },
15        { id: 2, name: 'std2', course: 'mad2' },
16        { id: 3, name: 'std3', course: 'mad1' },
17      ],
18    }
19  },
20}
21const Student = {
22  template: `<div>Name: {{student.name}}, Course: {{student.course}}</div>`,
23  props: ['id'],
24  computed: {
25    student() {
26      return Students.data().students.find((std) => {
27        return std.id == (this.id % 3) + 1
28      })
29    },
30  },
31}
32
33const router = new VueRouter({
34  routes: [
35    {
36      path: '/',
37      component: Home,
38      children: [
39        { path: '', component: Students },
40        { path: 'student/:id', component: Student, props: true },
41        { path: '*', component: NotFound },
42      ],
43    },
44  ],
45})
46
47new Vue({
48  el: '#app',
49  template: `<div><router-view /></div>`,
50  router,
51})