vue利用Tree 树形控件和锚点链接实现导航功能

Vue可以利用Tree树形控件和锚点链接实现导航功能，步骤如下：

1. 导入Tree组件

在Vue项目中，可以使用已有的Tree组件库，例如element-ui、iview等，也可以自己编写Tree组件。

2. 树形数据处理

将导航菜单数据处理成树形结构，并将每个节点的链接作为节点的属性。

3. 渲染Tree组件

在页面中渲染Tree组件，将处理好的树形数据传入组件的data属性中。

4. 监听Tree组件的节点点击事件

使用Tree组件提供的节点点击事件，在点击节点时获取节点的链接，利用Vue的$router对象实现路由跳转，并将跳转的目标设置为锚点链接。

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

<template>
  <div>
    <el-tree :data="treeData" @node-click="handleNodeClick"></el-tree>
  </div>
</template>

<script>
export default {
  data() {
    return {
      treeData: [
        {
          label: '导航1',
          children: [
            {
              label: '子导航1',
              link: '#link1'
            },
            {
              label: '子导航2',
              link: '#link2'
            }
          ]
        },
        {
          label: '导航2',
          children: [
            {
              label: '子导航3',
              link: '#link3'
            },
            {
              label: '子导航4',
              link: '#link4'
            }
          ]
        }
      ]
    }
  },
  methods: {
    handleNodeClick(data) {
      if (data.link) {
        this.$router.push(data.link);
      }
    }
  }
}
</script>

在上面的代码中，treeData是树形结构的导航菜单数据，使用了element-ui的Tree组件进行渲染。在点击节点时，如果节点有link属性，就利用Vue的$router对象进行路由跳转，并将目标设置为锚点链接。