Vue.js: Router-link with a function inside

Question

I have notifications in my app which I get from API. Each notification has a parameter "notification_type". By clicking on the notification, the user can be addressed to the different pages with different content depending on the notification_type. In the component of the notification I have the router link which must lead to different components(pages for the user).

<template>
 <div>
  <router-link to="/#">
    <p>
    <span v-html="item.message"></span>
    </p>
  </router-link>
 </div>
</template>

<script>
export default {
   props: ['item']
}
</script>

I supposed that instead of '/#' I need to pass a function with conditions. For example, if notification_type is equal to "user_subscribed", then the user will be addressed to the page of the follower. If the notification_type will be equal to "comment_created", than the user will be addressed to the post page with comments. I understand the logic but I am struggling to implement this.

Answer 1

You can implement like this:

<template>
 <div @click="redirectUser(item.notification_type)">
    <p>
    <span v-html="item.message"></span>
    </p>
 </div>
</template>

<script>
export default {
   props: ['item'], 
   methods: {
     redirectUser (notificationType) {
       if (notificationType === 'user_subscribed') {
         this.$router.push('/your-custom-route')
       } else if (notificationType === 'comment_created') {
         this.$router.push('/awesome-comments')
       }
     }
   }
}
</script>