013Vue3独立路由模块加载使用范例

013Vue3独立路由模块加载使用范例

• 通过路由懒加载，隔离辅助模块与主模块，也支持辅助模块独立调试与运行

子路由文件与模块map

export default [
  {
    path: '',
    alias: '/about',
    name: 'about',
    component: () => import('@/views/test/about/Index.vue'),
    meta: {
      title: '关于我们',
    },
  },
  {
    path: 'props',
    name: 'props',
    component: () => import('@/views/test/props/Index.vue'),
    meta: {
      title: 'props测试',
    },
  },
];

主Vue3文件入口

• web-client\ui\src\views\test\Index.vue

<script setup lang="ts">
import IndexTest from './routes';

const menus = IndexTest.map((el: any) => {
  return {
    path: '/test/' + el.path,
    title: el.meta.title || el.name || el.path,
  };
});
</script>

<template>
  <div>
    <el-link type="primary" v-for="item in menus" :key="item.path" :href="item.path">
      {{ item.title }}
    </el-link>
  </div>
  <router-view></router-view>
</template>

<style scoped lang="scss">
.el-link {
  margin-right: 8px;
}
</style>

独立路由模块挂载范例

// 独立模块加载
import IndexTest from '@/views/test/Index.vue'; // 路由router-view
import testRoutes from '@/views/test/routes'; // 子路由文件

// 定义项目路由
const routes: RouteRecordRaw[] = [
  {
    path: '/', // 主路由地址
    alias: '/index', // 别名，和路由一样
    name: 'index',
    component: IndexView, // 组件加载
    meta: {
      // meta中可以定义一些页面的元素
      title: '主页', // 页面的标题
    },
    children: [
      // 路由嵌套，拼接主路由与当前子路由，如/index+ui组合成/index/ui
      {
        path: '',
        alias: 'ui',
        name: 'ui',
        component: () => import('@/views/ui/Index.vue'), // 组件懒加载
        meta: {
          title: 'UI主页',
        },
      },
    ],
  },
  {
    path: '/test', // 主路由地址
    alias: '/t', // 别名，和路由一样
    name: 'testIndex',
    component: IndexTest, // 组件加载
    meta: {
      title: '测试', // 页面的标题
    },
    // 这里将独立的路由模块挂载在指定的路由下
    children: [...testRoutes],
  },
];