路由配置

在iView-admin中，路由配置承担着重要的作用，它影响着如下内容：

  • 左侧菜单内容
  • 是否缓存该页
  • 该页面图标（显示在菜单、面包屑和Tab标签）
    接下来来看如何配置路由

路由的配置是在 './src/router' 文件夹下，'./src/router/index.js'文件中定义路由拦截的逻辑，'./src/router/routers.js' 文件中定义页面路由信息。

1.路由可配项

iview-admin中meta除了原生参数外可配置的参数:

  1. meta: {
  2.   hideInMenu: (default: false) 设为true后在左侧菜单不会显示该页面选项
  3.   showAlways: (default: false) 设为true后如果该路由只有一个子路由，在菜单中也会显示该父级菜单
  4.   notCache: (default: false) 设为true后页面不会缓存
  5.   access: (default: null) 可访问该页面的权限数组，当前路由设置的权限会影响子路由
  6.   icon: (default: -) 该页面在左侧菜单、面包屑和标签导航处显示的图标，如果是自定义图标，需要在图标名称前加下划线'_'
  7.   href: 'https://xxx' (default: null) 用于跳转到外部连接
  8. }

2.跳转到其他网页，在新窗口打开

你可以在菜单栏中显示一个任意连接，并且点击该菜单项会打开新窗口展示链接到的页面。在路由中需要如下定义：

  1. export default [
  2.   {
  3.     path: '',
  4.     name: 'lison16',
  5.     meta: {
  6.       href: 'https://github.com/lison16',
  7.       icon: '_love',
  8.       title: 'Lison的github首页'
  9.     }
  10.   }
  11. ]

这样在菜单栏中点击Lison的github首页这一项就会打开一个新窗口，跳转到https://github.com/lison16

3.在独立页面展示的页面

如登录页、错误页这种独立的页面，无需使用Main组件，则直接定义在 routers.js 中export default []的数组中，如登录页的定义如下：

  1. export default [
  2.   {
  3.     path: '/login', // 必须项
  4.     name: 'login', // 必须项，后面缓存页面需要用到，且这个name是唯一的
  5.     meta: {
  6.       title: 'Login - 登录',
  7.       hideInMenu: true // 是否在左侧菜单中隐藏，默认为false
  8.     },
  9.     component: () => import('@/view/login/login.vue')
  10.   },
  11.   /* 其他路由 */
  12. ]

4.在Main组件展示区域中展示的页面

页面作为多Tab页展示，在Main组件的视图区域显示，则需要在用到子路由，定义如下：

  1. export default [
  2.   {
  3.     path: '/multilevel',
  4.     name: 'multilevel', // 一级目录
  5.     meta: {
  6.       icon: 'arrow-graph-up-right',
  7.       title: '多级菜单'
  8.     },
  9.     component: Main, // 一级目录必须使用Main组件作为component
  10.     children: [
  11.       {
  12.         path: 'level_2_1',
  13.         name: 'level_2_1', // 一级目录下的二级页面
  14.         meta: {
  15.           icon: 'arrow-graph-up-right',
  16.           title: '二级-1'
  17.         },
  18.         component: () => import('@/view/multilevel/level-1.vue') // 这引入的是页面单文件
  19.       },
  20.       {
  21.         path: 'level_2_2',
  22.         name: 'level_2_2',
  23.         meta: {
  24.           access: ['super_admin'], // 权限控制<Array>，包含可访问该页面的用户权限
  25.           icon: 'arrow-graph-up-right',
  26.           title: '二级-2'
  27.         },
  28.         component: parentView, // 如果该路由不是页面，而是二级即更多级目录，需要用parentView组件
  29.         children: [
  30.           {
  31.             path: 'level_2_2_1',
  32.             name: 'level_2_2_1',
  33.             meta: {
  34.               icon: 'arrow-graph-up-right',
  35.               title: '三级'
  36.             },
  37.             component: () => import('@/view/multilevel/level-2/level-2-1.vue')
  38.           }
  39.         ]
  40.       }
  41.     ]
  42.   }
  43. ]

5.路由拦截

在'./src/router/index.js'文件中，你可以配置路由跳转时的路由守卫。你可以设置文件中的LOGIN_PAGE_NAME常量，其默认值是login，这个就是路由列表中你的登录页面的name值，如果你的登录页面name值为login，则无需修改。

原文: https://lison16.github.io/iview-admin-doc/#/路由配置