Question 29: Consider the following Vue Router configuration in a Vue…

1const routes = [
2  {
3    path: '/',
4    name: 'Home',
5    component: HomeView
6  },
7  {
8    path: '/user/:id',
9    name: 'UserProfile',
10    component: UserProfile
11  },
12  {
13    path: '/product/:category/:id',
14    name: 'ProductDetail',
15    component: ProductDetail
16  }
17];

1<template>
2  <div>
3    <button @click="goToUser">View User</button>
4    <button @click="goToProduct">View Product</button>
5    <router-link :to="{ name: 'Home' }">Home</router-link>
6  </div>
7</template>
8
9<script>
10export default {
11  methods: {
12    goToUser() {
13      this.$router.push({ name: 'UserProfile', params: { id: 123 } });
14    },
15    goToProduct() {
16      this.$router.push({ name: 'ProductDetail',
17                          params: { category: 'electronics', id: 456}
18                        });
19    },
20    navigateOne() {
21      this.$router.push({ name: 'UserProfile', params: { id: 555 },
22                          query: { tab: 'settings'}
23                        });
24    },
25    navigateTwo() {
26      this.$router.replace({ name: 'Home' });
27    },
28    goBack() {
29      this.$router.go(-1);
30    }
31}
32</script>