Question 15: Consider the below Vue component template and script def…

1<template>
2  <div>
3    <h1>{{ pageTitle }}</h1>
4    <router-link to="/home" v-if="showHomeLink">Home</router-link>
5    <router-link to="/about" v-if="showAboutLink">About</router-link>
6    <router-view></router-view>
7  </div>
8</template>

1<script>
2export default {
3  name: 'App',
4  data() {
5    return {
6      pageTitle: 'Vue Router Demo',
7      showHomeLink: true,
8      showAboutLink: false,
9    };
10  },
11  watch: {
12  '$route.path'() {
13    if (this.$route.path === '/home') {
14      this.showAboutLink = true;
15      this.showHomeLink = false;
16      this.pageTitle = 'Home Page';
17    } else if (this.$route.path === '/about') {
18     this.showAboutLink = false;
19     this.showHomeLink = true;
20     this.pageTitle = 'About Page';
21   } else {
22     this.pageTitle = 'Vue Router Demo';
23      }
24   },
25  },
26};
27</script>