vue-element-admin项目学习笔记（3）路由分析一:静态路由

路由模块非常重要，自己基于这个框架进行开发，这个必须吃透！！
前情回顾：

vue-element-admin项目学习笔记（1）安装、配置、启动项目
vue-element-admin项目学习笔记（2）main.js
文件分析

如果对vue路由部分还不是很熟悉的小伙伴，建议可以先去了解一下，或者看一下我的这两篇笔记：

Vue路由简明实操笔记
vue路由守卫简明操作笔记

我们先看一下根组件，app.vue

<template>
  <div id="app">
    <!-- 一级路由出口,被路由规则匹配到的组件，就会被放置到这里 -->
    <router-view />
  </div>
</template>

里面只有路由出口router-view，由此可见，想用这个项目，把路由搞清楚的重要性！！！

本项目，路由分为两部分，静态路由、动态路由。

• 静态路由：所有用户可访问，不用匹配权限（如登录页、错误页等等）

• 动态路由：需要鉴权，动态路由规则

开始：

文件：项目目录/src/router/index.js

先看引入：

// 引入vue
import Vue from 'vue'
// 引入路由模块
import Router from 'vue-router'
// 使用路由，因为路由本质上是插件
Vue.use(Router)

// 布局组件，非常重要，也就是这个框架的“架子”
// 所有一级路由都要去匹配layout组件
import Layout from '@/layout'

// 引入其他四个路由模块
import componentsRouter from './modules/components'
import chartsRouter from './modules/charts'
import tableRouter from './modules/table'
import nestedRouter from './modules/nested'

在项目目录/src/router/index.js文件里，代码export const constantRoutes开始的部分的整个结构体，就是静态路由部分。

这部分路由规则，不需要鉴权，所有用户可访问，不用匹配权限（如登录页、错误页、一些自定义想给用户看的页面等等）

// 这部分定义的constantRoutes，就是静态路由
// - 静态路由：所有用户可访问，不用匹配权限（如登录页、错误页等等）
// - 动态路由：需要鉴权，动态路由规则
export const constantRoutes = [
  // 每一条路由规则，都是一个对象 
  //   path: '/redirect',访问路径
  //   component: Layout,对应组件
  //   hidden: true,     侧边栏是否显示
  //   children:[{...}]  二级路由，规则同一级
  {
    path: '/redirect',
    component: Layout,
    hidden: true,
    children: [
      {
        path: '/redirect/:path(.*)',
        // 这种组件导入写法，避免导入一大堆
        component: () => import('@/views/redirect/index')
      }
    ]
  },
  {
    path: '/login',//登录路由
    component: () => import('@/views/login/index'),
    hidden: true  //肯定不显示在侧边栏
  },
  {
    path: '/auth-redirect',
    component: () => import('@/views/login/auth-redirect'),
    hidden: true
  },
  {
    path: '/404',
    component: () => import('@/views/error-page/404'),
    hidden: true
  },
  {
    path: '/401',
    component: () => import('@/views/error-page/401'),
    hidden: true
  },
  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [
      {
        path: 'dashboard',
        component: () => import('@/views/dashboard/index'),
        name: 'Dashboard',
        meta: { title: 'dashboard', icon: 'dashboard', affix: true }
      }
    ]
  },
  {
    path: '/documentation',
    component: Layout,
    children: [
      {
        path: 'index',
        component: () => import('@/views/documentation/index'),
        name: 'Documentation',
        meta: { title: 'documentation', icon: 'documentation', affix: true }
      }
    ]
  },
  {
    path: '/guide',
    component: Layout,
    redirect: '/guide/index',
    children: [
      {
        path: 'index',
        component: () => import('@/views/guide/index'),
        name: 'Guide',
        meta: { title: 'guide', icon: 'guide', noCache: true }
      }
    ]
  },
  {
    path: '/profile',
    component: Layout,
    redirect: '/profile/index',
    hidden: true,
    children: [
      {
        path: 'index',
        component: () => import('@/views/profile/index'),
        name: 'Profile',
        meta: { title: 'profile', icon: 'user', noCache: true }
      }
    ]
  }
]