使用Typescript在Vue JS 3中键入浏览器历史记录

import { defineComponent } from 'vue';

interface HistoryItem {
  title: string;
  url: string;
}

export default defineComponent({
  // 组件的逻辑和模板
});

data() {
  return {
    history: [] as HistoryItem[],
  };
},

mounted() {
  window.addEventListener('popstate', this.updateHistory);
},
methods: {
  updateHistory() {
    // 获取浏览器历史记录
    const historyState = window.history.state;
    const historyItem: HistoryItem = {
      title: historyState.title,
      url: historyState.url,
    };
    // 更新浏览器历史记录数组
    this.history.push(historyItem);
  },
},

<template>
  <div>
    <h2>浏览器历史记录</h2>
    <ul>
      <li v-for="item in history" :key="item.url">
        <a :href="item.url">{{ item.title }}</a>
      </li>
    </ul>
  </div>
</template>