Vue3如何实现多层嵌套路由？

不用反复添加children路由，直接用通配符路由就能匹配任意层级的文件夹路径，复用同一个folder组件，具体操作如下：

1. 修改路由配置 #

把原来的嵌套路由改成单条通配符路由，匹配/folders/开头的所有层级路径：

window.router = new VueRouter({
  routes: [
    // ...其他路由
    {
      path: '/folders/*', // 匹配/folders/后任意层级的子路径
      name: 'folder',
      component: require('./components/folder.vue')
    }
  ]
})

2. 获取当前文件夹路径 #

在folder组件里，通过$route.params['*']拿到路由匹配到的层级字符串。比如访问/folders/f1/f1-1/f1-1-1时，this.$route.params['*']的值就是f1/f1-1/f1-1-1，直接把这个字符串传给API接口即可。

3. 监听路由变化更新数据 #

因为同一个组件复用，路由切换时组件不会重新触发created钩子，所以需要通过以下方式处理数据更新：

方式一：使用路由守卫beforeRouteUpdate #

export default {
  data() {
    return {
      folderData: null
    }
  },
  created() {
    this.loadFolderData()
  },
  // 路由更新时触发，加载新路径的文件夹数据
  beforeRouteUpdate(to, from, next) {
    this.loadFolderData()
    next()
  },
  methods: {
    loadFolderData() {
      const folderPath = this.$route.params['*'] || ''
      // 替换成你的实际API请求逻辑
      axios.get(`/api/folders?path=${folderPath}`).then(res => {
        this.folderData = res.data
      })
    }
  }
}

方式二：监听$route变化 #

export default {
  data() {
    return {
      folderData: null
    }
  },
  watch: {
    // 监听路由变化，immediate确保组件初始化时也执行一次
    '$route': {
      immediate: true,
      handler() {
        const folderPath = this.$route.params['*'] || ''
        axios.get(`/api/folders?path=${folderPath}`).then(res => {
          this.folderData = res.data
        })
      }
    }
  }
}

4. 生成子文件夹跳转链接 #

点击子文件夹时，直接拼接当前路径生成新路由：

<!-- 示例：假设subFolder是子文件夹对象 -->
<div v-for="subFolder in folderData.children" :key="subFolder.name">
  <a @click="$router.push(`/folders/${$route.params['*'] || ''}/${subFolder.name}`)">
    {{ subFolder.name }}
  </a>
</div>

内容的提问来源于stack exchange，提问作者Elnaz