Question

我在app中收到了来自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>

Vue.js：里面有一个函数的路由器链接

1 个答案: