Vue3树形控件实现跳转页面

要实现Vue3树形控件的跳转页面功能，可以在树形控件中添加一个链接属性，然后在点击树形节点时，获取该节点的链接属性并跳转到对应的页面。

以下是一个简单的示例代码：

<template>
  <div>
    <ul>
      <li v-for="node in treeData" :key="node.id" @click="handleNodeClick(node)">
        {{ node.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      treeData: [
        {
          id: 1,
          name: '节点1',
          link: '/page1'
        },
        {
          id: 2,
          name: '节点2',
          link: '/page2'
        },
        {
          id: 3,
          name: '节点3',
          children: [
            {
              id: 4,
              name: '子节点1',
              link: '/page3'
            },
            {
              id: 5,
              name: '子节点2',
              link: '/page4'
            }
          ]
        }
      ]
    }
  },
  methods: {
    handleNodeClick(node) {
      if (node.link) {
        this.$router.push(node.link)
      }
    }
  }
}
</script>

在上面的代码中，我们在每个树形节点中添加了一个link属性，用来保存该节点对应的链接。在点击节点时，如果该节点有链接，就使用Vue Router进行跳转，否则不执行任何操作。