组件添加name属性

  1. vue3.3之前

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <script lang="ts">
    export default {
      name: '',
    }
    </script>

    <script setup lang="ts">

    </script>

  2. vue3.3之后

    1
    2
    3
    4
    5
    <script setup lang="ts">
    defineOptions({
      name: '',
    })
    </script>

把views目录下全部添加到路由

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 读取 views/ 下所有vue文件
const files = import.meta.glob('../views/**/*.vue', {
  import: 'default', // 导入全部
  eager: true, // 同步加载模块
})

Object.keys(files).forEach(key => {
  const name = files[key].name
  const fileName = files[key].__name
  const obj = {
    name: name,
    path: '/' + fileName,
    component: files[key],
  }
  router.addRoute(obj)
})