路由示例

提示

以下是一些常见的路由示例，你可以根据自己的需求进行配置。

阅读示例前请先阅读《路由(导航)》章节，了解路由的基本配置。

不包括 路由的 icon 和 cache 等功能性的操作，这里只是简单的路由配置示例。

单路由示例

效果如下图所示：

在 router/modules 目录下新建一个 single.ts 文件，内容如下：

import type { RouteRecordRaw } from 'vue-router'

const routes: RouteRecordRaw = {
  path: '/single',
  component: () => import('@/views/demo/index.vue'),
  name: 'Single',
  meta: {
    title: '单页面路由',
    singleMenu: true,
    icon: 'i-solar-confetti-minimalistic-bold',
  },
}

export default routes

引入到 router/routes.ts 文件中：

import Single from './modules/demo/single'

const asyncRoutes: Route.recordMainRaw[] = [
  {
    meta: {
      title: '演示管理系统',
      i18n: $t('route.demo'),
      icon: 'i-iconamoon-3d-duotone',
    },
    children: [
      Single,
    ],
  },
]

提示

后面的文章内容同样是，在 router/modules 目录下新建一个文件，然后引入到 router/routes.ts 内，后面不在赘述相同的规则

层级路由示例

效果如下图所示：

import type { RouteRecordRaw } from 'vue-router'

function Layout() {
  return import('@/layouts/index.vue')
}

const routes: RouteRecordRaw = {
  path: '/multilevel_menu_example',
  component: Layout,
  redirect: '/multilevel_menu_example/page',
  name: 'multilevelMenuExample',
  meta: {
    title: '多级导航',
    icon: 'i-heroicons-solid:menu-alt-3',
  },
  children: [
    {
      path: 'page',
      name: 'multilevelMenuExample1',
      component: () => import('@/views/multilevel_menu_example/page.vue'),
      meta: {
        title: '导航1',
        icon: 'i-heroicons-solid:menu-alt-3',
      },
    },
    {
      path: 'level2',
      name: 'multilevelMenuExample2',
      redirect: '/multilevel_menu_example/level2/page',
      meta: {
        title: '导航2',
      },
      children: [
        {
          path: 'page',
          name: 'multilevelMenuExample2-1',
          component: () => import('@/views/multilevel_menu_example/level2/page.vue'),
          meta: {
            title: '导航2-1',
          },
        },
        {
          path: 'level3',
          name: 'multilevelMenuExample2-2',
          redirect: '/multilevel_menu_example/level2/level3/page1',
          meta: {
            title: '导航2-2',
          },
          children: [
            {
              path: 'page1',
              name: 'multilevelMenuExample2-2-1',
              component: () => import('@/views/multilevel_menu_example/level2/level3/page1.vue'),
              meta: {
                title: '导航2-2-1',
              },
            },
            {
              path: 'page2',
              name: 'multilevelMenuExample2-2-2',
              component: () => import('@/views/multilevel_menu_example/level2/level3/page2.vue'),
              meta: {
                title: '导航2-2-2',
              },
            },
          ],
        },
      ],
    },
  ],
}

export default routes

面包屑导航

平级模式

效果如下图所示：

import type { RouteRecordRaw } from 'vue-router'

function Layout() {
  return import('@/layouts/index.vue')
}

const routes: RouteRecordRaw = {
  path: '/breadcrumb_example',
  component: Layout,
  redirect: '/breadcrumb_example/list1',
  name: 'breadcrumbExample',
  meta: {
    title: '面包屑导航',
    icon: 'i-solar-confetti-minimalistic-bold',
  },
  children: [
    {
      path: 'list1',
      name: 'breadcrumbExampleList1',
      component: () => import('@/views/demo/breadcrumb_example/list1.vue'),
      meta: {
        title: '列表1（平级模式）',
      },
    },
    {
      path: 'detail1',
      name: 'breadcrumbExampleDetail1',
      component: () => import('@/views/demo/breadcrumb_example/detail1.vue'),
      meta: {
        title: '详情1',
        sidebar: false,
        activeMenu: '/breadcrumb_example/list1',
      },
    },
  ],
}

export default routes

层级模式

效果如下图所示：

import type { RouteRecordRaw } from 'vue-router'

function Layout() {
  return import('@/layouts/index.vue')
}

const routes: RouteRecordRaw = {
  path: '/breadcrumb_example',
  component: Layout,
  redirect: '/breadcrumb_example/list2',
  name: 'breadcrumbExample',
  meta: {
    title: '面包屑导航',
    icon: 'i-solar-confetti-minimalistic-bold',
  },
  children: [
    {
      path: 'list2',
      name: 'breadcrumbExampleList2',
      redirect: '/breadcrumb_example/list2',
      meta: {
        title: '列表2（层级模式）',
      },
      children: [
        {
          path: '',
          component: () => import('@/views/demo/breadcrumb_example/list2.vue'),
          meta: {
            title: '列表2（层级模式）',
            sidebar: false,
            breadcrumb: false,
          },
        },
        {
          path: 'detail2',
          name: 'breadcrumbExampleDetail2',
          component: () => import('@/views/demo/breadcrumb_example/detail2.vue'),
          meta: {
            title: '详情2',
            sidebar: false,
            activeMenu: '/breadcrumb_example/list2',
          },
        },
      ],
    },
  ],
}

export default routes

iframe 路由

提示

iframe 路由必须声明 redirect,无实际意义仅为了 Typescript 类型检查

iframe 路由的类型是 function | string ，因为在内嵌页面时，有可能需要动态获取地址或者需要给 iframe传递一些参数，所以这里支持函数类型

效果如下图所示：

import type { RouteRecordRaw } from 'vue-router'

const routes: RouteRecordRaw = {
  path: '/iframe',
  name: 'Iframe',
  redirect: '',
  meta: {
    title: '单页面路由',
    singleMenu: true,
    icon: 'i-solar-confetti-minimalistic-bold',
    iframe() {
      return 'http://124.223.184.245:10003/docs/'
    },
  },
}

export default routes

link 路由

提示

link 路由必须声明 redirect,无实际意义仅为了 Typescript 类型检查

效果如下图所示：

import type { RouteRecordRaw } from 'vue-router'

const routes: RouteRecordRaw = {
  path: '/link',
  name: 'Link',
  redirect: '',
  meta: {
    title: '跳转路由',
    singleMenu: true,
    icon: 'i-solar-confetti-minimalistic-bold',
    link: 'http://124.223.184.245:10003/docs/',
  },
}

export default routes