路由配置

在 Vue Admin Next 中，除了配置路由和组件的对应关系之外，还通过 meta 信息描述了页面的面包屑、是否需要鉴权等：

import AppLayout from '@/common/layout'

const ExampleList = () =>
  import(/* webpackChunkName: "examples" */ '../pages/list/ExampleList').then(
    (ExampleList) => ExampleList
  )

const exampleRootModule = {
  text: '示例模块',
  link: '/examples',
}

const routes = [
  {
    path: '/examples',
    component: AppLayout,
    children: [
      {
        path: '',
        component: ExampleList,
        meta: {
          // 面包屑配置
          breadcrumbs: [exampleRootModule, '标准列表'],
          // 用于默认布局的 router-view 进行缓存，需要与组件的 name 一致
          name: 'example-list',
          // 是否需要登录权限
          requiresAuth: true,
          // 是否需要 URL 权限
          requiresURIAuth: true,
        },
      },
    ],
  },
]

export default routes

面包屑

默认布局在启用面包屑（preference.useBreadcrumb）的情况下，可以通过元信息 meta.breadcrumbs 配置当前路由的面包屑。格式如下：

const breadcrumb = [
  {
    text: '一级模块',
    link: '/foo',
  },
  {
    text: '二级模块',
    link: '/foo/bar',
  },
  '页面名称',
]

路由组件缓存

默认布局在启用标签管理（preference.useTabView）的情况下，需要 <router-view> 对组件进行缓存才有比较好的体验。因此务必为每个路由添加 meta.name 元信息，且必须与组件声明的 name 一致。

元信息配置示例：

{
  meta: {
    name: 'example-list'
  }
}

组件声明示例：

<script>
export default {
  name: 'example-list',

  data() {
    return {}
  },
}
</script>

懒加载

具体方式参考 官方文档，需要注意的是，同一个模块内使用同一个 webpackChunkName 即可。

内置拦截器

由于 Vue Admin Next 采用了前端路由，为了进行页面权限的判断，基于路由守卫实现了两个内置的拦截器。

登录拦截器

判断用户是否登录（全局用户状态中存在用户 ID），若未登录则跳转到登录页。每个路由配置中通过 meta.requiresAuth 启用。

源码目录：src/common/router/interceptors/AuthInterceptor.js。

路由权限拦截器

通过 authService.hasURIAuth 判断用户是否具有当前路由的权限。每个路由配置中通过 meta.requiresURIAuth 启用。

源码目录：src/common/router/interceptors/URIInterceptor.js。

TIP

单个路由在启用 URIInterceptor 的情况下必须同时启用 AuthInterceptor，否则无法获取用户及权限信息。