Vue.js：带有内部函数的路由器链接

Question

我的应用程序中有从API获取的通知。每个通知都有一个参数“ notification_type”。通过单击通知，可以根据notification_type将用户定向到具有不同内容的不同页面。在通知的组件中，我具有路由器链接，该链接必须指向不同的组件（用户页面）。

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

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

我以为不是'/＃'我需要传递一个带有条件的函数。例如，如果notification_type等于“ user_subscribed”，那么该用户将被定向到关注者的页面。如果notification_type等于“ comment_created”，则将向用户发送带有评论的帖子页面。我了解逻辑，但是我正在努力实现这一点。

Answer 1

您可以这样实现：

<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>