用vue写一个 功能通知，点击通知可以跳转页面

好的，下面是一个Vue的代码示例，实现了一个基本的功能通知（Notification）组件，点击通知可以跳转到指定页面：

<template>
  <div class="notification" v-show="show">
    <div class="content" @click="redirectToPage">
      <span>{{ message }}</span>
      <span class="close-btn" @click="close">&times;</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      message: '',
      page: ''
    }
  },
  methods: {
    // 显示通知
    showNotification(message, page) {
      this.message = message
      this.page = page
      this.show = true
    },
    // 关闭通知
    close() {
      this.show = false
    },
    // 跳转到指定页面
    redirectToPage() {
      if (this.page) {
        this.$router.push(this.page)
        this.close()
      }
    }
  }
}
</script>

<style>
.notification {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: #f0f0f0;
  padding: 10px;
  display: none;
}

.content {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.close-btn {
  font-weight: bold;
  margin-left: 10px;
}
</style>

在这个代码示例中，我们创建了一个名为Notification的单文件组件，它包含了一个显示通知内容的区域和一个关闭按钮。当需要显示通知时，我们可以通过调用showNotification方法来设置通知内容和跳转页面，然后将show属性设置为true，以显示通知。当用户点击通知区域时，我们可以通过调用redirectToPage方法来跳转到指定页面，并关闭通知。

需要注意的是，这个代码示例中使用了Vue Router来实现页面跳转，因此需要在Vue项目中引入Vue Router，并在组件中使用this.$router来访问路由实例。如果你的项目中没有使用Vue Router，可以根据自己的需求来修改代码，实现页面跳转功能。