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>