Vue3树形控件实现跳转页面完整示例代码

以下是一个简单的示例代码，实现了在树形控件中点击节点时跳转到其他页面：

<!-- Tree.vue -->
<template>
  <div>
    <ul>
      <li v-for="node in treeData" :key="node.id">
        <span @click="handleNodeClick(node)">{{ node.label }}</span>
        <Tree v-if="node.children" :treeData="node.children"></Tree>
      </li>
    </ul>
  </div>
</template>

<script>
import Tree from './Tree.vue';

export default {
  name: 'Tree',
  components: {
    Tree,
  },
  props: {
    treeData: {
      type: Array,
      required: true,
    },
  },
  methods: {
    handleNodeClick(node) {
      if (node.url) {
        window.location.href = node.url;
      }
    },
  },
};
</script>

在上面的示例中，我们定义了一个 `Tree.vue` 组件，它接收一个名为 `treeData` 的数组型属性，用于显示树形结构。当用户点击一个节点时，我们调用 `handleNodeClick` 方法来处理这个事件。如果该节点包含一个 `url` 属性，则我们使用 `window.location.href` 来跳转到该页面。

下面是使用该组件的示例代码：

<!-- App.vue -->
<template>
  <div>
    <Tree :treeData="treeData"></Tree>
  </div>
</template>

<script>
import Tree from './Tree.vue';

export default {
  name: 'App',
  components: {
    Tree,
  },
  data() {
    return {
      treeData: [
        {
          id: 1,
          label: 'Node 1',
          url: '/page1',
        },
        {
          id: 2,
          label: 'Node 2',
          children: [
            {
              id: 3,
              label: 'Node 2-1',
              url: '/page2',
            },
            {
              id: 4,
              label: 'Node 2-2',
            },
          ],
        },
      ],
    };
  },
};
</script>

在上面的示例中，我们定义了一个名为 `App.vue` 的根组件，并将 `treeData` 作为属性传递给 `Tree` 组件。 `treeData` 包含了根节点和两个子节点，其中每个节点都可以包含一个 `url` 属性，用于指定要跳转的页面。